

Sticky headers inherently take up space on the screen that could be used for content, so it’s important that you use that space responsibly. This factor is even more important on mobile devices, given the small size of the screen.

Maximize the Content-to-Chrome Ratio by Keeping It Small Here are 5 tips to ensure that your sticky header’s design helps, not hinders, your users. However, when implemented poorly, sticky headers are annoying, distracting, and obstruct page content. The header stays in place while the user scrolls. Accenture’s desktop site uses a sticky header containing the site navigation, search, and utility navigation. They increase the discoverability of the elements in the header and the chance that users will take advantage of them.

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. 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.
