Position fixed vs position sticky
position: fixed has been a staple of CSS for a long time now, and it’s served us well. More recently, we’ve been treated with
Both of them are really similar but there are some important differences. In this post, we’ll be looking at the differences, as well as the use cases for each.
The differences between
position: fixed generally means fixed to the viewport*. You tell it where to position itself, and it stays there as the user scrolls. It is out of the flow of the rest of the document.
- There are some edge cases where it isn’t fixed to the viewport. This can be a real pain if you run into the issue, though I think it’d be somewhat rare. The MDN outlines them if you are interested. Hit me up on Twitter if you can think of a possible benefit or use case!
On the other hand,
sticky scrolls along like anything else until it reaches the offset that you set. At that point, it acts like it’s
There is a catch though, it must stay within it’s containing block (it’s parent)! Once that containing block scrolls off the page, it leaves with it.
That can cause some problems, but when you know how to use it properly, can open up some doors.
Here are both of them in action, which should help clarify the differences.
When to use
So with that in mind, we want to use fixed when it must always be on the same place on the page at all times. It simply doesn’t move.
Be careful with
fixed though. Using it takes that element out of the document flow. Visitors to your page can see it, but as far as the rest of the content on the page is concerned, it isn’t there.
That means it can potentially cover some elements, hiding them from view. Sometimes it’s not a big deal on desktop, but when you hit mobile and screen real-estate is limited, this can cause problems.
When to use
You’ll want to use
Keep in mind that it stays within its parent, so once the parent scrolls off, it’s gone. This isn’t an issue if the parent is the
body, but the rest of the time you might not get the effect you are after.