Sticky Header (scroll-state query)

A sticky sub-header that adds a shadow and highlight the exact moment it becomes genuinely stuck to its scroll boundary — not when it merely scrolls near the top — using the new CSS scroll-state() container query: the sticky wrapper declares container-type: scroll-state, and @container scroll-state(stuck: top) restyles a CHILD element the instant position: sticky actually engages. This replaces the classic 'wire up an IntersectionObserver sentinel element plus a scroll/resize listener plus a JS class toggle' pattern used by nearly every 'header changes on scroll' implementation on the web today. Real, current, sourced support as of this run: the Chrome for Developers blog post 'CSS scroll-state() queries' (developer.chrome.com/blog/css-scroll-state-queries), MDN's 'Using container scroll-state queries' guide, and independent write-ups (ICS MEDIA's 'Using CSS @container scroll-state() for sticky headers and scroll effects', modern-css.com's 'CSS scroll-state() Container Queries: :stuck and :snapped') all describe the same container-type: scroll-state + @container scroll-state(stuck: top) mechanism, and agree stuck/scrollable/snapped shipped in Chrome 133 / Edge 133 (February 2025) — a fourth state, scrolled, shipped later in Chrome 144 (January 2026) and is not used in this demo. Cross-checked support: two independent WebSearch queries agree this is Chromium-only (Chrome, Edge, Opera, Samsung Internet) — Safari 27 and Firefox 158 have NOT shipped it as of this run (caniuse puts global coverage around 72% in August 2026), so this is explicitly NOT Baseline yet, same honesty policy as every prior entry in this catalog. One real spec gotcha worth stating plainly rather than glossing over: the query cannot restyle the container itself — the stuck-state style has to target a descendant (this demo puts container-type on a wrapper div and applies the shadow to its child .ssq-bar), not the sticky element directly, or the rule silently never matches. Degrades safely with zero risk: a non-supporting browser just keeps an ordinary sticky bar with no shadow-on-stick — never broken, never misplaced, since position: sticky itself is old and universally supported on its own. **Honest verification gap found this run, not glossed over:** the underlying feature genuinely works in this sandbox's real Chromium (141.0.7390.37) — confirmed with a plain top-level HTML file, where scrolling the panel makes position: sticky engage and the @container scroll-state(stuck: top) rule fires exactly as documented. But the SAME exact HTML/CSS, run inside a sandboxed srcDoc iframe embedded in a page that itself has scrollable content around that iframe (precisely how this catalog's own /motion/[slug] page is laid out), never fires the stuck-state style in this run's testing, even though position: sticky itself still visibly engages (the toolbar's real on-screen position matches the stuck offset exactly). Isolated the cause with a minimal repro: the same iframe embedded in a short, non-scrolling host page works correctly every time; adding a tall scrollable filler around that same iframe reproduces the failure on demand. This is stated as this run's own reproduced finding in this specific sandboxed testing environment, not asserted as a documented Chromium bug — no matching public bug report was found this run, and it should be spot-checked on an ordinary (non-sandboxed) Chrome/Edge 133+ tab outside this environment before treating it as settled either way. (Vanilla example: live iframe preview + HTML/CSS tabs — scroll the inner panel; the toolbar itself locks in place correctly, but per the caveat above the shadow may not appear in this catalog's own preview iframe even though the underlying CSS is correct and does work standalone.)

<div class="ssq-scroller">
  <p class="ssq-para">Scroll inside this box. The toolbar below is a real position: sticky element — watch what happens the instant it actually locks to the top.</p>
  <p class="ssq-para">Keep scrolling down through this filler paragraph — the panel needs real overflow for the toolbar to travel and actually stick, not just look sticky from the start.</p>
  <p class="ssq-para">One more line of filler before the toolbar reaches the top of this scroll box.</p>
  <div class="ssq-stickwrap">
    <div class="ssq-bar">Toolbar — CSS itself knows when this is truly stuck</div>
  </div>
  <p class="ssq-para">Still scrolling… the shadow and colored border you see now are CSS reacting to its own real stuck state, not a scroll-position guess.</p>
  <p class="ssq-para">No IntersectionObserver. No scroll listener. No JS class toggle.</p>
  <p class="ssq-para">More content here so the panel keeps scrolling well past the point the toolbar locks in place.</p>
  <p class="ssq-para">And a little further still, to leave plenty of room to scroll back up again.</p>
  <p class="ssq-para">Scroll back up and the shadow clears the instant it un-sticks.</p>
  <span class="ssq-note">Needs Chrome/Edge/Opera 133+ — elsewhere the toolbar just stays a plain sticky bar, never broken.</span>
</div>