The sticky header of the Hammerhead site.

[mouakter14]

You probably already know what a sticky header is, even in an intuitive sense. It’s when the header section of your site “sticks” to the top of the screen as you scroll. Unlike a static header, which stays in place and disappears as you scroll, the sticky header is an element that is always visible.

While the typical approach to a sticky header is to pin a static version of it to the top of the screen, there are a few different ways to make it more usable, screen-efficient, and dynamic. Below, we'll look at some real-world examples.

Examples of sticky headers on the web
You’ll find sticky headers all over the web, and it’s a good idea to check a few out to see the scope of what you can achieve. One of the most basic examples is Hammerhead . This site uses a “dropdown menu” and a sticky header, and it’s simple: It commits to staying at the top of the page in its static layout:

The sticky header of the Hammerhead site.
Another simple implementation is Kin . It uses the typical sticky header, but this time with a few cool design elements.

You'll notice that the contrast changes depending on germany whatsapp number data which part of the site you scroll through, and there are some nice transition effects too:

The sticky header of the Kin website.
The sticky header of the Kin website.
We can’t end this section without mentioning Kinsta’s sticky header . It also keeps things simple when it comes to header elements, but includes a nice usability touch that offers value to the visitor:

Kinsta's website sticky header.
Kinsta's website sticky header.
This time, you'll see the header disappear as you scroll down the page. However, it will reappear when you scroll back up – you can refer to it as a "partially persistent header."

The premise here is that scrolling down means you're spending your time on the page itself, so you probably won't need the navigation, login pages, or heading elsewhere. However, the moment you scroll up, you're more likely to want to head to another page on the site. In this case, the sticky header will pop up to save the day.

It’s these little touches of user experience (UX) that make visitors want to come back to your site. For your own sticky header designs, you’ll want to consider what you can do to create a UX and UI that focuses on the visitor’s needs.