First, some definitions

• A sticky header stays put at the top of the screen when you scroll down.
• A semi-sticky header reappears at the top of the screen once you start scrolling up.

The purpose of having a sticky or semi-sticky header is to ease navigation. Your customers don’t have the time to scroll all the way to the top in order in order to access another page or perform a search. Well, they may actually have the time but the patience to do so may be lacking. This is a pain point that can be remedied quite easily. It may seem relatively minor but it’s kind of a big deal.

Let’s look at some data

• 94% of people believe navigation is the most important feature on a website.
• A usability study was conducted among 40 users in 2012. They had two versions of a website, one with a sticky header and the other with a traditional menu. The difference was pretty subtle but it was enough. Six said they had no preference while 34 preferred the site with the sticky header. That’s a whooping 85%. Problem is, they couldn’t exactly explain why they preferred the site with the sticky header, they just liked it.
• From the same study, sticky headers provide a 22% boost in navigation speeds compared to traditional menus.

Criticism

A major criticism of sticky headers is that they take up far too much space. This is not without its merits. If you have a two or three-row header, showing the whole of it may not be a good idea. One thin row should be enough, the one with crucial elements like the burger menu, search bar, and cart icon.

Examples

Adidas

ASOS

Walmart