Sticky Header

A sticky header is the bar across the top of a site that stays pinned in place while the rest of the page scrolls underneath it. However far down you read, the logo, the menu, and the button are still sitting there.

The picture catches it mid-scroll: the scrollbar is halfway down the page, content is sliding under the bar, and the bar hasn't moved. A normal header scrolls away with the page; a sticky one stays pinned to the glass while everything slides beneath it.

The case for it is the moment you finish reading and the menu is a mile back up the page. With a sticky header, navigation is always one move away, and the main call to action stays on screen for the entire visit. Long marketing pages and stores lean on it for exactly that reason.

The case against: a sticky header charges rent, a slice of every screenful the visitor will ever see. On a laptop the slice is cheap. On a phone it's expensive, which is why mobile sticky headers often shrink as you scroll, or duck away and reappear the moment you scroll back up.

You'll also hear "fixed header" (the developer word, straight from the CSS), "pinned header," and "sticky nav."

When you want the menu reachable from anywhere on the page, ask for a sticky header. If the design team pushes back about screen space, they're not wrong either. That's the rent.