Sticky header

Sticky is a hybrid position, and the hybrid is the whole point. The element sits in normal flow, taking up its own room and scrolling with everything around it, right up to the moment its offset threshold is met. From there it stops, and the content carries on underneath. position: fixed is the impostor people reach for first: a fixed header is pinned from the first pixel, never occupies flow, and has to have its height paid back with padding on whatever follows it.

The behaviour has two conditions that catch everyone. It needs an inset to stick to, so top: 0 is not decoration but the threshold itself, and without it nothing happens. And it sticks within its own scroll container, which means any ancestor carrying overflow: hidden, auto, or clip becomes that container and the header will pin to a box the reader cannot see moving. Most reports of sticky being broken are one of those two.

A pinned header is a permanent tax on vertical space, which is why it is worth being stingy: it should be shorter than the version that scrolled in, and on a phone it should carry the one control that justifies its presence rather than the whole navigation. Anchored links need scroll-margin-top roughly equal to the header’s height, or every jump lands with its target hidden behind the thing that stayed. Where the header is a table’s own head, the same technique applied to th gives a column header that behaves the way a spreadsheet’s does.

Styling the pinned state used to require a scroll listener and a class, which is what the specimen does here so the state is legible in markup. CSS now answers it directly: a scroll container declared with container-type: scroll-state lets a rule ask @container scroll-state(stuck: top) and change the shadow or the height at the moment the header lands, with no script involved.