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.
- 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.
- Shelf
- Engineering
- Group
- Platform 07 of 08
- Theme
- Light and dark
- Live pointer
- 8 steps, until you take over