Stop Using Fixed Headers and Start Using Sticky Ones

Publish Date: Jun 25 '20

89 30

Like them or not, headers that stay visible at the top of the page are a very popular UI and will likely not be going away anytime. Many sites make use of this kind of header, including Reddit, Facebook, Apple, and even DEV. What do each of these sites have in common? They are all using fixed headers.

I wanted to share that there is a better way to do this, and I am curious as to why no one is taking the approach of using a sticky header instead.

The issue with fixed headers

By using position: fixed on an element like the header, the element is removed from the stack and positioned relative to the browser window. That means it no longer takes up space and any elements positioned after it will adjust to fill up that area. In regards to a header, that means elements will be placed underneath it and you'll need to accommodate for it by using padding or relative positioning.

See Dev or Apple, which use a variable to store the header height and applies padding to the body or main tag:

Or Facebook, which uses relative positioning and a top offset to adjust for spacing:

Or Reddit, which uses a margin to solve it instead:

This is probably the worst way to build a header like because it's not responsive and extra unnecessary css. I suggest that headers like this should use sticky positioning instead.

The benefits of sticky positioning

By using position: sticky on a element like the header, it does a few great things. First of all, it doesn't remove the element from the stack, so it still keeps it's real estate in the container. That means you don't have to perform any of these hacks to get the right spacing for the main content and the header. Also, it still stays at the top of page or wherever you need it based on the scroll position. So instead of:

Setting header to position:fixed
Calculating the height with JS or manually adding it to a variable
Adjusting the position of the content with padding, margins, or relative positioning with that variable

All you have to do is:



header {
  position: sticky;
  top: 0;
}

And that's it, no extra variables or calculations needed.

Here is a very simple example in a Codepen:

Browser Support

Of course, the only downside is that it does not work on IE 11:

But really though, who is accessing the Apple website or Dev from IE11? Maybe I'm just crazy, but think there a few sites that can start making this transition over to sticky positioning.

Comments 30 total

mark l chavesJun 25, 2020
Hi Luis,

Thanks for the article. Do you have a live code sample? I tried this a few times and I couldn't get it to work for me.

For example, in this pen, I disabled the CSS that compensates for my previous fixed header. Then, I changed my header to position sticky. No luck. All my anchors get hidden under the sticky header.

codepen.io/marklchaves/full/XWXgQJM

I checked to make sure my JS wasn't doing anything funky. I added the plain vanillla HTML anchor also just to make sure it wasn't my JavaScript.

What am I doing wrong?

Thanks!
- Luis AugustoJun 25, 2020
  Hey Mark, thanks for reading! I took a look at the code and the sticky position does seem to be working, but are you referring to the tabs hiding under the header when you click on the anchor links? That is because anchor links will always bring that particular element to the very top of the page view, so regardless of whether you have a fixed or sticky header, it will always appear underneath when using an anchor link.
  
  To get around anchor links jumping elements to the top of the page, you can add an offset to your #tabstrip element, like so:
  
  #tabstrip { margin-top: -100px; padding-top: 100px; }
  
  I hope that helps!
  - mark l chavesJun 25, 2020
    Got it. It's also my (mis)understanding of how sticky is supposed to work then. I appreciate that.
    
    BTW, I use this snippet from SE to automatically compensate for fixed headers when using anchors.
    
    :target::before { content: ""; display: block; height: 6rem; margin: -6rem 0 0; }
    
    Thanks again!
    - Luis AugustoJun 25, 2020
      Awesome thanks for that, either way works!
Paweł KowalskiJun 25, 2020
TBH on my computer DEV headers are not sticked/fixed/anything else.
- Luis AugustoJun 25, 2020
  Sorry I didn't realize this when I wrote it, but looks like it's a setting in the UX options:
  - Paweł KowalskiJun 26, 2020
    Ouh, that must be it :) I dont like things taking up vertical space so i probably turned it off long time ago and forgot :))
SharequeJun 26, 2020
I recently face this issue for a sidebar header,
the position:sticky act as draggable content on iPad where as position: fixed stick to given position, works normal.
Dor ShinarJun 26, 2020
To be honest, I'm not a fan of either. I find it much simpler to use overflow-y: scroll on the element actually being scrolled (in DEV's case the articles), instead of fiddling with header position.
webstuffJun 26, 2020
Sooo sticky will let it hold the space in the dom, soi i won t need to add a margin top
- Luis AugustoJun 26, 2020
  Exactly
QuodlineJun 27, 2020
I prefer to hide the header when the user scrolls down and show it when the user scrolls up even slightly. I think it manages space better for small mobile phones.
- Luis AugustoJun 27, 2020
  That's also a great option, and I'm done that for a few sites as well. You can also use sticky header in that situation and just animate its position with transform: translateY(-100%)
  - Mr MobodiesJul 9, 2025
    It's NOT GREAT when uncloseable for those it distractions who don't want to see it constantly stuck there that they never had to before.
- Mr MobodiesJul 9, 2025
  I consider it like spammy behaviour and a form of intrusion/harassment when I can't scroll away from something I find very distracting totally unwanted, unclosable, un needed and stuck there in the way of the contents
  
  An auto hiding headers by scroll gives the user a choice of their browsing area that they once had, A fixed header constantly stuck there doesn't take that in account.
  
  I use StickHeaderHiderFixer by Emjostuff after 3 years of aggro from manually hiding them in developer tools and a bookmark killer I found
Waylon WalkerJul 15, 2020
I've been using headroom for a few months and like the simplicity (on my behalf) that it provides to make the nave hop in and out kinda like a more native mobile app.

Save screen real estate with react-headroom

Waylon Walker ・ Feb 11 '20 ・ 2 min read

#webdev #showdev #gatsby #todayilearned

Here it is on waylonwalker.com
- Luis AugustoJul 15, 2020
  Yea I also think this is a great approach, hiding the header when scrolling down and bringing it back when scrolling up. Easy to access and while still preserving screen real estate, and pretty easy to implement!
Paweł KowalskiAug 3, 2020
I decided to write a post that adds on top of yours: dev.to/platformos/scrolling-to-the... :)
- Luis AugustoAug 3, 2020
  Nice, thanks!
Oscar GonzálezMar 17, 2021
Does anyone notice the extra space(~1px) above the header when scrolling down. I can see it in Chrome only, other browsers works perfectly.
Any idea how to fix it?
dev-to-uploads.s3.amazonaws.com/up...
PhilipOct 15, 2021
this is good works perfectly
CharlieJun 10, 2022
A case for sticking with fixed header positioning involves headers that condense vertically when scrolling down the page, then expand again when user scrolls to top again (say, 100px threshold). Since sticky header is within document flow, when that animation occurs, it tweaks the scrollY value. The listener can get stuck performing the condense/expand animation in infinity loop. For example, user scrolls up and scrollY = 95px so the header expands by 10px. ScrollY is now 105px so header collapses and now scrollY = 95px again, and so on. It looks like the frenetic stutter step a squirrel makes when hesitating which way to run out of the road, not pleasant!
- Jean-Baptiste ManillierMay 19, 2024
  Hi, i track the container height and use the difference to adjust the minimize offset.
  
  eg in react:
  
  `
  const { scrollY } = useScroll();
  const previousHeightRef = useRef(0);
  
  const minimizedRef = useRef(minimized);
  minimizedRef.current = minimized;
  
  const adjustOffset = (offset: number) => {
  const currentHeight = containerRef.current?.offsetHeight || 0;
  const heightDifference = previousHeightRef.current - currentHeight;
  return Math.max(0, offset - heightDifference);
  };
  
  const handleScroll = useMemo(
  () =>
  throttle((latest: number) => {
  
  const adjustedMinimizeOffset = adjustOffset(minimizeOffset || 0); if (latest > adjustedMinimizeOffset) { if (!minimizedRef.current) { setMinimized(true); minimizedRef.current = true; } } else { if (minimizedRef.current) { setMinimized(false); minimizedRef.current = false; } } if (containerRef.current) { previousHeightRef.current = containerRef.current.offsetHeight; } }, 300), [scrollY, flyOutOffset, minimizeOffset],
  
  );
  
  useMotionValueEvent(scrollY, "change", handleScroll);`
- Mr MobodiesJul 9, 2025
  I prefer it auto hiding if that is the case. It gives us a choice over the room.
🇧🇴°•°• Simon Bolivar •°•°🇧🇴Dec 26, 2022
fkn genius!~
sticky all the way instead of this js gunk
thanks for the post
- Mr MobodiesJul 9, 2025
  Not the way forward when it can't be close for those it annoys
henryornellasApr 14, 2023
Great post! I couldn't believe reading all those extra lengthy css stackOverflow answers/youtube tutorials. Worked great, thanks.
GQJan 3, 2025
what can do to make the header not bounce when scrolling in iOS with sticky?
Mr MobodiesJul 9, 2025
How about you stop RAMMING THESE THINGS in their faces for those that don't want to see it constantly stuck there as they scroll.

You are not taking in account when these are not wanted by those who simply don't want them stuck there constantly as they scroll where it can become very distracting unhelpful and work against them.

This is absolutely DIGUSTING. No regard for user preference. What if I don't want to see them stuck there RAMMED into my face constantly where I hardly every use it to justify it. I find it very distracting and can't use it like that where I have to rely on Developer tools, Alistar bookmark killer, element hiders and now element hiding extensions to get them out of the way. Before that I use to loose me temper seeing them stuck there and not being able to scroll away from then when I first saw them in 2015. Spammy behaviour I thought that resembled what malware creators use to do when customers installed toolbars with their free games,

Here's one Chrome extension "Sticky Header Hider aka Fixed Header Fixer" by emojistuff.

StickyDucky for firefox.

Now these extensions wouldn't exist if these were indeed "popular" and didn't deny the user a choice of their viewing area when they try to scroll away from things they don't want stuck there and may not need.

It should be down to what the user wants not a few people telling others "like it or not"... self admitting" they are here to stay... etc stop giving your users a choice over their browsing area.

You are denying them a preference they once had over their viewing area.

It is their screen area not yours to interfere and spam over with things that they may not want to see stuck there and uncalled for

I find it, spammy behaviour, intrusive, insulting (dictating the user must see it for their own good, it's helpful because it is always there etc... users are stupid and can't navigate and it's for your own good) and lacks dignity for those who don't want it there. In this day and age I expect flexibility.

At the moment ebay have implemented one like with DuckDuckGo, one that hides as you scroll down and reappears depending on what speed you scroll up. That has to be a lot better than ramming it in yer face and would have saved me a lot of aggravation.

I have had many friends and customers complain over the decade that they didn't want them there but they didn't know or understand what they were called and how to get rid of them. So you CAN'T assume "it's popular" based on by how many people don't know how to complain.

It's people like you and that attitude,a fixed perception of what the user wants or has to have who spread this garbage around that that make it worse for people like me who simply don't need or want them stuck there with no mechanism to hide them when not needed where it gets in the way and serves as a nuisance distraction.

Reddit has an old copy old.reddit.com.

When apple started doing this in 2016 I contact them and they start to put a cross on the top of the fixed banners in the forums. Not sure about now.

You should be giving people a choice when to see these thing not spam their page with unwanted things because it is the trend.

I started a thread about this on the EEVblog forums:
eevblog.com/forum/dodgy-technology...

Please try to understand the frustrations and style your work out so it's not all about what you and a few people assume what you want them to see constantly.

You should be making things that the users want and as for, not what others ASSUME they want, MOCK THEM when they complain about the intrusion and then spread it onto other developers and this "like it or not" suggests that you know full well can frustrate and annoy the users.

Made by assumption... because it is stuck there that means it'd be more helpful, people will find it easier that'd make them happier and it'd give us more clicks and it's modern too and you tell this to someone that it distracts and annoys as hell.

Add comment

Luis Augusto @luisaugusto