Sticky Headers: 5 Ways to Make Them Better

View the original post

Summary: Persistent headers can be useful to users if they are unobtrusive, high-contrast, minimally animated, and fit user needs.


Sticky headers (or persistent headers ) are a common pattern for keeping the header of a website or app in the same place on the screen while the user scrolls down the page. A version of this pattern is the partially sticky header , which (re)appears at the top of the page as soon as the user starts scrolling up.

When done appropriately, sticky headers allow users to quickly access the navigation, search, and utility-navigation elements without scrolling up to the top of the page. They increase the discoverability of the elements in the header and the chance that users will take advantage of them.

However, when implemented poorly, sticky headers are annoying, distracting, and obstruct page content.

Read Full Article