Sticky Header
Also called fixed header, sticky nav, pinned toolbar, sticky bar
A header that stays at the top of the viewport while the content scrolls beneath it.
Example
Overview
What the service does, who it is for, and the shape of the rest of this page.
Scroll on and the header stays where it is. That is the whole trade: it costs 44px of every screen, and on a phone it costs the same 44px of a much smaller one.
Pricing
Three plans, billed monthly or yearly, with the limits that actually differ between them.
Scroll on and the header stays where it is. That is the whole trade: it costs 44px of every screen, and on a phone it costs the same 44px of a much smaller one.
Rate limits
Requests per minute per key, what happens at the ceiling, and how to ask for more.
Scroll on and the header stays where it is. That is the whole trade: it costs 44px of every screen, and on a phone it costs the same 44px of a much smaller one.
Support
Response times by plan, and the one address that reaches a person rather than a queue.
Scroll on and the header stays where it is. That is the whole trade: it costs 44px of every screen, and on a phone it costs the same 44px of a much smaller one.
Press a section button to jump to it.
Turn the checkbox off and jump again: the heading lands exactly under the header, which is what happens on every sticky-header site that forgot this. The same value has to cover focus jumps too — tabbing to something off-screen scrolls it into view by the same rules.
When to use it
- Something in the header is needed constantly — search, a filter, the primary action on a long page.
- Pages are long enough that scrolling back to the top is a real cost.
- The header can stay short. Two rows of sticky chrome is a window blind.
When not to
- The header is decorative. A logo and three links do not need to follow anyone down the page.
- Vertical space is scarce — a phone in landscape, a data table, a document editor.
- The page is short. Nothing sticks on a screen that never scrolls, but the extra CSS still causes bugs.
Trade-offs
- Navigation and key actions stay one click away at any scroll position.
- Keeps context on long pages: the current section stays named.
- `position: sticky` needs no JavaScript and no scroll listener.
- Costs the same height at every viewport, and hurts most where space is tightest.
- Covers anchor targets and focused elements unless `scroll-margin-top` is set to match it.
- Stacking-context and `z-index` fights with dropdowns, modals and sticky table headers are routine.
Accessibility
What this pattern needs in order to work for everyone.
- Keyboard
- Set `scroll-margin-top` on anything that can be scrolled to — headings, form fields, table rows. Without it the browser scrolls a focused element exactly under the header.
- The skip link must land below the header, not behind it. Test it: press Tab first, then Enter, and see where focus visibly lands.
- If the header hides on scroll down, it must come back on scroll up and on focus — a keyboard user tabbing into it should never be chasing it.
- Roles and state
- It is still a `<header>` with a `<nav>` inside. Sticking it to the top changes the painting, not the meaning.
- Keep it under about 10–15% of the viewport height; on small screens that is roughly 56px. Content is what people came for.
- Animate the hide-on-scroll behaviour only when motion is allowed — check `prefers-reduced-motion` and snap instead.
- Never trap the page behind a sticky element with `overflow: hidden` on the body; a header that stops the page scrolling is worse than no header.
- Focus
- The focused element must be visible below the header, always. `scroll-margin-top` is the fix, and it has to match the real header height including any border.
In the wild
- MDN — Short sticky header with a working skip link and anchor targets that clear it.
- Stripe Docs — Header hides going down, returns going up, and never covers the anchored heading.