Header

A sticky app bar that hides as you scroll down and slides back when you scroll up — plus a section header that lifts when it docks. Pure CSS, driven by container scroll-state queries.

scrolled querystuck query

A header does two things while you scroll: it can get out of the way, and it can announce when it’s docked. Container scroll-state queries let a sticky element react to how its scroller is moving, with no scroll listeners, observers, or state.

Hide on scroll down, reveal on scroll up

PreviewCode

<div class="overflow-hidden isolate rounded-xl border border-border">
  <div class="h-80 w-full max-w-sm overflow-y-auto [container-type:scroll-state]">
    <header
      class="sticky top-0 z-10 flex items-center rounded-t-xl gap-3 border-b border-border bg-background/85 px-4 py-3 backdrop-blur transition-[translate] duration-300 ease-out [@container_scroll-state(scrolled:block-end)]:-translate-y-full"
    >
      <span class="text-sm font-semibold tracking-tight">
        unscripted<span class="text-muted-foreground">/ui</span>
      </span>
      <nav class="ml-auto flex items-center gap-4 text-sm text-muted-foreground">
        <a href="#" class="transition-colors hover:text-foreground">Docs</a>
        <a href="#" class="transition-colors hover:text-foreground">Components</a>
      </nav>
    </header>

    <div class="space-y-4 p-4 text-sm/6 text-muted-foreground">
      <p class="font-medium text-foreground">Scroll down — the bar slides away. Scroll up — it comes right back.</p>
      <p>No scroll listener, no <code class="font-mono text-xs">requestAnimationFrame</code>, no state. The bar is a plain sticky element; a container scroll-state query does the hiding.</p>
      <p>The trick is a single conditional: while the container was last scrolled toward its block-end, the bar translates up out of view. Reverse direction and the query stops matching, so it returns.</p>
      <p>Because it reads scroll <em>direction</em> rather than position, the bar reappears the instant you scroll up — giving you the whole viewport back until you want the chrome again.</p>
      <p>This is the pattern shipped by news sites and docs apps everywhere, usually built with a few dozen lines of JavaScript and a resize observer. Here it's four declarations.</p>
      <p>Everything degrades cleanly: where scroll-state queries aren't supported yet, you keep an ordinary always-visible sticky header.</p>
      <p>Keep scrolling to feel it settle, then flick back up. The motion respects <code class="font-mono text-xs">prefers-reduced-motion</code> automatically.</p>
    </div>
  </div>
</div>

Scroll down and the bar slides up out of view; the instant you scroll back up, it returns. Because it reads scroll direction rather than position, the bar responds to which way you’re going, not how far down the page you are.

The scroll container is marked [container-type:scroll-state], which lets its descendants query its scroll state. The bar itself is a plain sticky top-0 element.
@container scroll-state(scrolled: block-end) matches while the container was last scrolled down, and applies translate: 0 -100% to slide the bar away; scroll up and the query stops matching, so it returns to 0. In Tailwind that whole conditional is one utility: [@container_scroll-state(scrolled:block-end)]:-translate-y-full.
The demo scrolls inside its own bounded box on purpose. A scrolled query reads the nearest scroll-container ancestor, so a self-contained region keeps each example independent. In a real layout you’d mark the element that actually scrolls, often the document root.

Elevate when it docks

PreviewCode

<div class="h-80 w-full max-w-sm overflow-y-auto rounded-xl border border-border">
  <div class="space-y-3 p-4 text-sm/6 text-muted-foreground">
    <p class="font-medium text-foreground">Keep scrolling — the section header docks, then lifts.</p>
    <p>The bar sits flat in the flow of the page. The moment it pins to the top edge it gains a shadow, separating it from the content sliding underneath.</p>
  </div>

  <header class="sticky -top-px z-10 [container-type:scroll-state]">
    <div
      class="flex items-center justify-between border-y border-border bg-background/85 px-4 py-2.5 backdrop-blur transition-shadow duration-200 [@container_scroll-state(stuck:top)]:shadow-lg"
    >
      <span class="text-sm font-semibold tracking-tight">Section title</span>
      <span class="font-mono text-xs text-muted-foreground">stuck: top</span>
    </div>
  </header>

  <div class="space-y-4 p-4 text-sm/6 text-muted-foreground">
    <p>Here <code class="font-mono text-xs">container-type: scroll-state</code> lives on the sticky element itself, and a query asks whether it's currently stuck.</p>
    <p>Scroll-state queries can only style the container's descendants, so the shadow is painted on an inner bar rather than the <code class="font-mono text-xs">&lt;header&gt;</code> node.</p>
    <p>It's the classic "flat until it sticks, then it elevates" affordance — the one that normally needs an IntersectionObserver sentinel to detect the pinned state.</p>
    <p>No sentinel, no observer, no scroll handler. The browser tracks stickiness and flips the query for you.</p>
    <p>Scroll back to the top and the shadow fades out as the header rejoins the flow.</p>
    <p>Because it's a real sticky element, the header keeps its landmark, its links, and its place in the tab order the entire time.</p>
  </div>
</div>

A section header that sits flat in the flow, then lifts with a shadow the moment it pins to the top edge. The shadow is the cue that content is now scrolling beneath it.

Here container-type: scroll-state goes on the sticky element itself, and @container scroll-state(stuck: top) matches once it’s pinned to the top edge.
Scroll-state queries only style a container’s descendants, so the shadow lives on an inner bar inside the <header> rather than on the header node.
It’s the “flat until it sticks, then it lifts” affordance you’d normally build with an IntersectionObserver sentinel. Here it’s one utility and zero JavaScript.

Accessibility

The bar moves only visually. It stays in the DOM, in the tab order, and reachable by keyboard and screen reader the whole time. Nothing is inserted or removed on scroll, so focus and announcements stay stable. Mark the <header> up as a banner/navigation landmark as you normally would.

Reduced motion

The global prefers-reduced-motion rule collapses the slide and the shadow fade to an instant change. The bar still hides and reveals, it just doesn’t travel.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Scroll-state query: scrolled (direction)Limited availability	144	144	✕	✕	The header stays permanently visible — an ordinary sticky header. Nothing is hidden and no content is lost.
Scroll-state query: stuckLimited availability	133	133	✕	✕	The docked header simply does not gain its elevation shadow.

† @supports can’t test @container descriptors, so the badge checks container-type: scroll-state (Chrome 133) — but the scrolled query this uses only works from Chrome 144.