Platform 07
Stuck header
The header is position: sticky and a scroll-state container; @container scroll-state(stuck: top) gives it the paper background and the 0.5 px hairline only while it is held at the top, so at rest it has neither.
From the Engineering page on ramtt.com
- The scroll area is a second scroll-state container, and scroll-state(scrollable: bottom) shows a 40 px fade at the bottom only while there is more to scroll.
- Both are style rules the browser updates as it scrolls, with no scroll listener.
- Without scroll-state queries, two 1 px sentinels watched by an IntersectionObserver set the same states as data attributes.