demo · v144

Direction-aware Nav

Classic mobile pattern: hide the navigation when the user scrolls down, show it when they scroll up. Done in pure CSS via scroll-state(scrolled: top|bottom) — no scroll listener, no rAF loop.

scroll-state(scrolled): checking…

☰ MenuArticlesBookmarksSearch

The auto-hiding header pattern was previously a 20-line JavaScript exercise: store lastScrollY, compare on every scroll event, throttle it, debounce it, unregister on unmount.

With scroll-state(scrolled: top) the state is part of the cascade. The transition is GPU-accelerated and there is no JavaScript at all.

This doesn't add a new capability — it cuts the code, removes a class of bugs (forgotten passive listeners, scroll jank), and reaches for the use case.

Keep scrolling: reverse direction, the bar pops back. Reverse again, it hides.

Other useful values on the scrolled axis: x, y, and none. Container has to opt-in with scroll-state-container: scrolled.

Pair this with scroll-driven animations and you have a complete declarative toolkit for scroll-reactive UI.

Bottom of the article. Scroll up to wake the menu.

the API

.scroller { scroll-state-container: scrolled; }
@container scroll-state(scrolled: bottom) {
  .nav { transform: translateY(-100%); }
}
@container scroll-state(scrolled: top) {
  .nav { background: var(--accent-blue); }
}

see also