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 position: sticky.

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 sticky and fixed

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.

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 fixed.

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.

See the Pen sticky vs fixed by Kevin (@kevinpowell) on CodePen.

When to use fixed

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 sticky

You’ll want to use sticky when you want something to scroll into view and then stop once it reaches a certain point. In the past we had to use JavaScript to do this. It’s amazing that we can do it with CSS now, and that it’s so simple 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.

Don't want to miss an article?

While creating my YouTube videos, I come across a lot of fun snippits of information and little known CSS properties that aren't really worth building full videos about. I share the cool little things I run across (like you read in this post), as well as some design tips and tricks, with a new post every Sunday. Sign up below to never miss a post.

No spam + you can unsub at any time :)