You probably don't need a sticky header
Screen real estate is extremely important to usability, especially so on mobile devices. On mobile devices and smaller desktop screens there are less than 1,000 pixels in height of usable screen space. If you have a poorly implemented sticky header that takes up 200 pixels of screen space, you've used up almost a quarter of the screen right off the bat. You'll also need to consider that if the user isn't viewing your website in full screen mode, the browser shell takes up around 10%-15% of the screen.
Even worse, if your users are using mobile devices in landscape mode, the available screen space is shrunk by over 50%! This is beyond a minor annoyance and is a huge detriment to usability. There are however cases where a sticky header, when used properly is very beneficial.
What types of sites should use a sticky header?
E-commerce sites with a large catalog of products
With any online store, easy access to the search bar or product filtering is crucial. If you have 100 products on a page and the user is near the bottom of the list they need to scroll quite a distance to get back up to reach the search bar/filters. This is especially noticeable on mobile where, due to screen size restraints, products are stacked in one giant column instead of rows. Pinning your header to the top of the page is a great solution to this problem.
Blogs or text based websites with expansive longform content
While blogs are the most common type of longform content websites, this can also apply to sites with academic literature or documentation websites. Similar to e-commerce sites, when you have extremely long text-based content (say 15 or more minutes of reading time per post), it's a nice benefit for users to have navigation always present to prevent them from needing scroll excessively.
Interactive web applications where certain pertinent info always needs to stay visible
A great example of this is where a time sensitive action needs to be completed. Either a timer or an eye-catching callout can be pinned to the top of the screen to remind the user to take action. Another example might be some quickly changing info like stock tickers or sports scores.
General guidelines for an effective sticky header
-
Make it no larger than it absolutely needs to be. Anything taller than 80px is probably too large and will decrease user satisfaction since too much of the main content will be covered.
-
Keep it simple. Only include the most pertinent information or actions so it doesn't become a distraction.
-
Be aware of content stacking and text wrapping. This applies to websites without a sticky header as well. If you have too many links or buttons in your header or some of the text is too long, common behavior is for them to stack and increase the size of the header which reduces available screen size.
-
Consider accessibility concerns. Make sure your sticky header is well engineered an doesn't have focus traps for users with screen readers.
When not to use a sticky header?
-
You spent a lot of money on a big, beautiful logo and want your branding prominently displayed. You might think this is a scenario where you need to anchor your logo to the top of the screen but you really shouldn't. Sticky elements need to provide utility to justify the space they permanently occupy on the screen and logos and branding don't pass the test.
-
Your website is smaller in scope and doesn't have a whole lot of content. The shorter the pages on your website are, the less users need to scroll to get back to the top.
-
When there are alternatives to a sticky header which still provides the utility you're looking for but utilizes screen space better. We'll look over those next.
Alternatives
-
A "scroll to top" widget in one of the bottom corners that links back to the header for easy navigation. A small button or icon generally will take up far less space than a sticky header.
-
A sidebar on desktop views which becomes a slide-out menu on mobile. This configuration reserves more space for the main content than a sticky header would.
-
A keyboard shortcut. If you want the search bar to be always available, you can educate users that using a keyboard shortcut (ctrl+K on windows or ⌘+K on mac) will bring up the search bar.
-
A sticky header that only appears while the user is scrolling upwards, which signals intent to return to the header navigation.