Sticky header
A header that stays attached to the top of the viewport as the user scrolls.
Sticky headers keep navigation reachable without forcing the user to scroll back up. CSS achieves this with `position: sticky`, which behaves like static positioning until the user scrolls past a defined offset, at which point it sticks to that offset. The same technique works vertically for a sticky sidebar that stays in view while a long article scrolls past. `position: fixed` is the older, less flexible alternative. Both are widely supported. Sticky headers are most useful on long pages where users frequently need navigation, search, or primary actions.
Also called
When to use
- Long pages where users frequently need navigation or search
- Apps where primary actions live in the header
- Documentation and long articles with persistent section nav (as a sticky sidebar)
When not to use
- Pages where vertical space matters more than navigation access (reading apps, photo viewers)
- Mobile screens where the header eats limited vertical space
- Auto-hiding the header on scroll without clear affordances to bring it back
Related
Source
CSS `position: sticky` is Baseline 'widely available'. The pattern itself predates the CSS feature; sites used `position: fixed` or JavaScript before sticky shipped in 2016-2017.