Design Sticky Elements Carefully

Layout & Responsive · navigation, responsive, hierarchy

Updated 2026-07-28

Make each sticky element earn its space. Everything pinned to an edge is space permanently removed from the content, on the screens that have the least of it.
Count the total. A sticky header, a sticky filter bar, a sticky table head, and a sticky footer can leave a phone showing four lines of the thing the user came for.
Shrink on scroll rather than staying at full height. A compact bar keeps navigation available without holding a hero-sized block on screen forever.
Consider hiding on scroll down and revealing on scroll up. It gives the content the full screen while keeping navigation one small gesture away.
Make sure anchors and in-page links account for the sticky offset. Otherwise every jump lands with the target heading hidden underneath the bar.
Keep sticky elements out of the way of the keyboard and of focus. A focused field scrolled to the top of the viewport can end up behind a pinned header.
Give the sticky element a real background and a boundary. Content scrolling underneath a transparent bar is unreadable for both of them.
Reconsider stickiness at small heights. On a short window, or on a phone in landscape, the right answer is usually to let it scroll away.

Pinning something to the screen is a claim that it matters more than the content, so make that claim deliberately.