You probably want position: sticky instead of fixed

Position fixed and sticky have a lot of similarities, but sticky has a few things it does a lot better and a few things that we just can’t do with fixed, so in this video, I compare the difference between the two and also look at a few fun use cases for sticky.

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:27 - comparing fixed to sticky
02:29 - sticky is better for headers and navbars
04:14 - sticking to the bottom might not work how you expect
07:35 - A fun use case for sticking to the bottom
09:13 - Headings pushing each other out of the way
12:58 - The mistake people make with position sticky that stops it from working

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[benja-min]

Worth mentioning that sticky wont work if *any* parent/ancestor has overflow:hidden (however far up the dom). You can use overflow clip instead, but that rule will not work in Safari or
any iOS. So beware!
But keep up the useful stuff Kevin!

[i_am_ergo]

I absolutely love how you explain how things work through specific use cases, man.
Immediate applicability of knowledge is king when it comes to learning.
Thank you!

[DanteMishima]

I have been using sticky since I did Conquering Responsive Layouts

[LePhenixGD]

Beware! CSS has a bug where, if you use position fixed on an element whose parent container uses the transform property, it will behave like a position absolute relative to the parent container

[olegkremianski]

Thank you very much, Kevin. You rock as usually. One of the practical use cases of what you have so neatly shown is A-Z list where a letter are in the left column and a list of items / descriptions starting from that letter is in the right.

[ngenchev]

When using the sticky none of your wrappers should have "overflow hidden", but if you need it, you could use this instead of overflow hidden, and this would trick the sticky position
```
.wrapper{
overflow: initial;
overflow-x: clip;
}
```

[nitinbhattacharyya]

Best video on position sticky. Absolutely cleared all my doubts. Thanks.

[thescribblersdiary]

Sir! You saved my day. I was always confused about these 2. Thanks a lot sir and best wishes for your channel

[rodrigoparizotto]

Great content, Kevin! Nice to see how to troubleshoot why sticky is not working on my div 😅

[deathone]

position: sticky; bottom: 0; Could be used for a jump to the top type buttons on really long pages.

[einatblackrose]

You came with just the right inspiration for what I'm about to start working on now. Clear and helpful as always. Tnx a lot for that

[alvaroprietovideos]

This was a very nice video. Thanks for sharing, you help us stay up to date!

[diegomarzo]

Fantastic like alway, such a source of knowledge and good stuff Kevin!!!! Thank you so much

[rameshkg]

I really love your use case and explanation. Thank you so much.

[matthewnewland]

Okay, for the longest time, I thought Kevin was saying "Friend and friends" at the beginning of his videos, and I thought it was slightly odd. But in this video, I realized it was "front-end friends" for the first time. #blessed

[MyUbuntuVids]

Thank you for the great explainer on sticky. I have seen examples of a table's headings sticking to the top as the rest of the table scrolls down the page. Is that accomplished using 'position: sticky' or by some other means?

[triteraerlangga]

woah thanks kevin, it's always a pain in the a** for me to create a sticky navbar. Now I understand it better

[castlemoyle]

Another great video. Great use of the "ghostie" class with the emoji class name..

[ankur_thakur]

Nice Video. I think sticky is not related to screen it's related to closest scrollable element. That's why bottom behaves that why as closest scrollable element is body

[practicalsolutions]

Great explanation of fixed and stikcy, thank you.