Glossary
web-design
Sticky Header
Definition
A website header that stays fixed at the top of the screen as users scroll down the page.
What is a Sticky Header?
A sticky header (or fixed header) is a navigation bar that remains visible at the top of the browser window as users scroll down the page. Instead of disappearing off-screen, it "sticks" in place, keeping navigation accessible at all times.
Benefits of Sticky Headers
Always-Available Navigation
Users can navigate anywhere on your site without scrolling back to the top. This is especially valuable on long pages.
Brand Visibility
Your logo stays visible throughout the browsing session, reinforcing brand presence.
Quick Actions
Contact buttons, search, and calls to action remain one click away.
Common Implementations
| Type | Behaviour |
|---|---|
| Always visible | Header stays fixed from page load |
| Scroll-triggered | Header appears after scrolling past a certain point |
| Show on scroll up | Header hides when scrolling down, reappears when scrolling up |
| Shrinking header | Header reduces in size after initial scroll |
Potential Downsides
- Screen space - Takes up vertical space, especially on mobile
- Distraction - Can interfere with content focus
- Performance - Poorly implemented sticky headers cause scroll jank
Best Practices
- Keep sticky headers slim, especially on mobile
- Make the header less prominent after scroll (reduce opacity or size)
- Consider the "show on scroll up" pattern for mobile
- Ensure the header doesn't cover important content
- Test on small screens—if it takes more than 15% of the viewport, reconsider
Not every website needs a sticky header. Simple sites with short pages often work better without one.