Difference between position:sticky and position:fixed?

Question

The documentation was pretty hard to understand since I am new to CSS. So can anyone please explain the actual difference between position:sticky and position:fixed? I would also appreciate an example.

I have gone through https://developer.mozilla.org/en-US/docs/Web/CSS/position and a few other articles, but I still don't get it.

Solution 1

position: fixed always fixates an element to some position within its scrolling container or the viewport. No matter how you scroll its container, it will remain in the exact same position and not affect the flow of other elements within the container.

Without going into specific details, position: sticky basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed, causing the element to "stick" to its position instead of being scrolled out of view. It eventually gets unstuck as it gets scrolled back toward its original position. At least, that's how I understand it in theory.

The reason why I want to avoid going into details is because position: sticky is brand new, experimental (as shown in the document you link to), and not finalized yet. Even what I've stated above may well change in the near future. You won't be able to use position: sticky yet anyway (hopefully this will change within the next year).

Mozilla recently presented its implementation of position: sticky here. It's highly worth a watch.

Solution 2

See this self-explanatory example for better clarity. CODEPEN

Fixed Position:

1. An element with fixed position is displayed with respect to the viewport or the browser window itself. It always stays in the same place even if the page is scrolled.

2. It does not effect the flow of other elements in the page ie doesn't occupy any specific space(just like position: absolute).

3. If it is defined inside some other container (div with or without relative/absolute position), still it is positioned with respect to the browser and not that container. (Here it differs with position: absolute).

Sticky Position:

1. An element with sticky position is positioned based on the user's scroll position. As @Boltclock mentioned it basically acts like position: relative until an element is scrolled beyond a specific offset, in which case it turns into position: fixed. When it is scrolled back it gets back to its previous (relative) position.

2. It effects the flow of other elements in the page ie occupies a specific space on the page(just like position: relative).

3. If it is defined inside some container, it is positioned with respect to that container. If the container has some overflow(scroll), depending on the scroll offset it turns into position:fixed.

So if you want to achieve the fixed functionality but inside a container, use sticky.

Solution 3

Let me make it extremely simple.

fixed position will not occupy any space in the body, so the next element(eg: an image) will be behind the fixed element.

sticky position occupies the space, so the next element will not be hidden behind it.

Following image is fixed some part of image is hidden behind navbar, because Fixed element doesn't occupy space. You can solve this by adding margin or before/ after pseudo classes

This eg is of sticky position. Here Image is fully shown, nothing is hidden behind navbar because sticky elements occupy space in the document.

Solution 4

Suppose you have a navigation bar at the top of your website and you want it to be fixed so that as you scroll down the page, it's always visible.

If you give it position: fixed; then the page content at the top will be hidden below the navigation bar. In contrast, if you decide to give it position: sticky; top: 0;, the navigation bar will remain in the flow of the document, and gracefully pushes the content underneath it below, so no content is hidden.

When you apply position: fixed; the navigation bar escapes from the normal document flow, similarly to when you float an element.

View more solutions

Comments

[BoltClock]

In case this question is still receiving traffic, position: sticky is commonplace now and as far as I understand, its mechanics haven't changed much from the time this question was asked. That said, someone else should provide an up-to-date answer.

[MarsAndBack]

I'm using position:sticky, and at first it works fine... goes from relative appearance to fixed. But on a longer page, eventually when I scroll down long enough, the sticky header disappears like other page objects.

[Babulaas]

Sticky looks very cool and handy. Hope it will be implemented to all browsers soon. I have seen this effect in some websites but is created with javascript. with sticky it can reduce the amount of code and complexity.

[ThdK]

Note not all browsers do implement sticky position. See: caniuse.com/#search=sticky

[wizzwizz4]

@MarsAndBack The header has to be a direct child of <body> if you want it to always stay on the screen, because sticky elements stick around no longer than their parents.

[NearHuscarl]

The last link is dead.

[BoltClock]

@NearHuscarl: That's no good. I can't find any surviving copies, not even on archive.org. Let me ask around.