Frontmatter
| id | 8495 |
| title | Fix sticky folder visual regression in transparent TreeList navigation |
| state | Closed |
| labels | bugdesignai |
| assignees | tobiu |
| createdAt | Jan 10, 2026, 11:07 AM |
| updatedAt | Jan 10, 2026, 2:52 PM |
| githubUrl | https://github.com/neomjs/neo/issues/8495 |
| author | tobiu |
| commentsCount | 1 |
| parentIssue | null |
| subIssues | [] |
| subIssuesCompleted | 0 |
| subIssuesTotal | 0 |
| blockedBy | [] |
| blocking | [] |
| closedAt | Jan 10, 2026, 2:52 PM |
Fix sticky folder visual regression in transparent TreeList navigation
tobiu assigned to @tobiu on Jan 10, 2026, 2:33 PM

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:
- Framework Core (
Neo.tree.List):
- Added
saveScrollPosition: false(default) tostatic config.- Implemented
onScrollCaptureto calculate sticky state logic. It toggles theneo-stuckclass on folder nodes whenscrollTop > 0and the scroll position overlaps with the sticky header'stopposition.- Portal App (
Portal.view.shared.content.TreeList):
- Enabled
saveScrollPosition: trueto opt-in to the new behavior.- Theming (
TreeList.scss):
- Added
.neo-stuckrule to applybackground-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
Recent design changes made
TreeListitems transparent to reveal the app background. This caused a regression forposition: stickyfolder 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
:stuckpseudo-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).Impact: Affects the navigation trees in the Learning and Releases sections of the Portal.