Sticky header

A sticky header is a nav bar that stays pinned to the top of the viewport while the page scrolls under it. Two CSS mechanisms do it, and the difference matters: 'position: sticky' leaves the header in the document flow and only pins once you scroll past it, while 'position: fixed' pulls it out of flow entirely, so you owe the page manual top padding or the first section hides behind it.

Worth it when navigation is used mid-page: long docs, dashboards, checkout flows, anything with a persistent search or CTA. Common refinements are shrinking the bar after the first scroll, adding a background and border only once it leaves the top (a transparent header over the hero, solid after), and hide-on-scroll-down / show-on-scroll-up so reading gets the full screen back.

Gotcha: anchor links land underneath it. Jump to #pricing and the heading sits behind the bar, because the browser scrolls the target to y=0. Fix it with 'scroll-margin-top' on the targets or 'scroll-padding-top' on the root, matched to the header height. Also keep it short (56 to 64px): on a phone in landscape, a tall sticky header plus the browser chrome can eat a third of the screen. And watch the ancestors: an 'overflow' value of hidden, scroll, or auto on a parent makes that parent the scrolling box the header sticks inside, so depending on that box's height the header either pins to the wrong thing or scrolls away with it instead of staying at the top of the viewport.