demo · v133

Sticky shrink header — the explainer's marquee example

A header that gets compact, dark, and reveals its Subscribe button the moment it sticks. Old solution: IntersectionObserver on a sentinel. New solution: @container scroll-state(stuck: top) — pure CSS.

scroll down to see the header stick & shrink

Heron & Co.

Slate boats slip through reedbeds long before the kingfisher notices them.
Down at the lock a heron stands very still, in that way they have of pretending to be lamp posts that knew better.
A pair of swans regard the human towpath with the patience reserved for things that will not be there in a hundred years.
By Bourne End the wind shifts. Three mallard chicks scatter from a punt that wasn't expecting them.
A jay calls. Sycamore seeds spiral down through the air like tiny propellers.
The towpath ends in a stile that no one has used since 1973. The river continues anyway.
Cygnets, four of them, follow the patient parents into a backwater.
A heron lifts, very late, and beats away upriver.

the CSS

.scroller {
  overflow-y: auto;
  container-type: scroll-state;
  container-name: feed;
}
.sticky-header { position: sticky; top: 0; padding: 1rem; }
@container feed scroll-state(stuck: top) {
  .sticky-header { padding: 0.5rem 1rem; background: #000; color: #fff; }
}

The other two scroll-state queries — scrolled and snapped — cover the rest of the "style based on scroll position" family. Each replaces a real scroll/IntersectionObserver pattern that web apps have shipped for a decade.

see also