LearnNewsExamplesServices
Frontmatter
id8495
titleFix sticky folder visual regression in transparent TreeList navigation
stateClosed
labels
bugdesignai
assigneestobiu
createdAtJan 10, 2026, 11:07 AM
updatedAtJan 10, 2026, 2:52 PM
githubUrlhttps://github.com/neomjs/neo/issues/8495
authortobiu
commentsCount1
parentIssuenull
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 10, 2026, 2:52 PM

Fix sticky folder visual regression in transparent TreeList navigation

Closed v11.20.0 bugdesignai
tobiu
tobiu commented on Jan 10, 2026, 11:07 AM

Recent design changes made TreeList items transparent to reveal the app background. This caused a regression for position: sticky folder headers.

Problem: Previously, opaque headers obscured scrolling content when stuck. Now, transparent headers cause text overlap (sticky header text + scrolling content text underneath) as the user scrolls.

Goal: Restore visual separation for sticky headers while maintaining the transparent aesthetic when they are not stuck.

Challenge: Detect when a sticky element is actively "stuck" to apply a conditional background (e.g., a blur, gradient, or opaque color). Standard CSS does not currently provide a :stuck pseudo-class.

Potential Approaches to Explore:

  • backdrop-filter: blur() (simplest, but support varies and might not provide enough contrast).
  • IntersectionObserver "sentinel" pattern (placing a hidden element above the sticky target to detect when it hits the top).
  • Javascript scroll monitoring (needs to be performant).

Impact: Affects the navigation trees in the Learning and Releases sections of the Portal.

tobiu added the bug label on Jan 10, 2026, 11:07 AM
tobiu added the design label on Jan 10, 2026, 11:07 AM
tobiu added the ai label on Jan 10, 2026, 11:07 AM
tobiu assigned to @tobiu on Jan 10, 2026, 2:33 PM
tobiu referenced in commit dec9690 - "feat: Implement sticky folder visual state for TreeList (#8495) on Jan 10, 2026, 2:52 PM
tobiu
tobiu Jan 10, 2026, 2:52 PM

Input from Gemini 3 Pro:

✦ I have implemented the visual fix for sticky folders in the TreeList.

Changes:

  1. Framework Core (Neo.tree.List):
    • Added saveScrollPosition: false (default) to static config.
    • Implemented onScrollCapture to calculate sticky state logic. It toggles the neo-stuck class on folder nodes when scrollTop > 0 and the scroll position overlaps with the sticky header's top position.
  2. Portal App (Portal.view.shared.content.TreeList):
    • Enabled saveScrollPosition: true to opt-in to the new behavior.
  3. Theming (TreeList.scss):
    • Added .neo-stuck rule to apply background-color: var(--list-item-background-color).

This restores the visual separation for sticky headers while maintaining transparency when they are not stuck.

tobiu closed this issue on Jan 10, 2026, 2:52 PM