18 / Scroll behaviour

Sticky State Query

The moment the bar catches at the top of its panel, it knows, and changes itself.

also called stuck detection · scroll-state container query · sticky-aware header

Until this shipped, every “shrink the header once it sticks” needed a scroll listener and a hand-picked pixel threshold that broke under zoom. Now the element is simply told what it is.

How it is built

container-type: scroll-state; @container scroll-state(stuck: top) { … }