demo · v144

Scrolled State Style

Scroll inside the panel below. The header re-styles itself the moment the panel leaves the top — emulating the @scroll-state(scrolled: …) CSS the feature ships in pure declarative form.

current scroll-state: none

Sticky header — restyles on scroll

Scroll inside this card. When you've moved off the top, the sticky header darkens. Scroll back to the top and it returns to the resting style.

This page emulates the @scroll-state(scrolled: y) query in JavaScript so the same behaviour is visible in every browser. In Chrome 144 the CSS query removes the JS scroll listener entirely.

The scrolled axis carries values top, bottom, x, y, and none. Containers can react to direction without any frame-by-frame script work.

Keep scrolling — there's enough text here to exercise both the top and bottom states. Real usage: collapse-on-scroll app bars, glow-on-scroll panels, sticky table headers that gain a shadow.

End of the scrollable region. Notice the bottom state flip if you scroll all the way down.

the API

@scroll-state(scrolled: top) {
  .header { box-shadow: none; }
}
@scroll-state(scrolled: y) {
  .header {
    background: black;
    color: white;
    box-shadow: 0 6px 0 black;
  }
}

the API

see also