Sticky Headers Are Easy to Get Wrong
Persistent navigation isn’t automatically a win. Page Laubheimer’s guidance boils the issue down to restraint: keep the bar compact, make it visually distinct, and avoid motion that distracts. If it does animate, honoring prefers-reduced-motion is a baseline courtesy.
One alternative he raises is the “partially persistent” nav — Jemima Abu’s “Smart Navbar” hides the header on scroll down and resurrects it on scroll up. And the most honest answer, he notes, may be skipping the sticky treatment entirely.
The name itself matters. “Sticky” points straight at position: sticky, which keeps the element in the document flow, saving its space automatically. The old position: fixed approach yanked it out of flow, forcing JavaScript hacks or hard-coded offsets — “magic numbers” — just to keep layout sane.
