Position sticky isn’t a new thing, but the support is now so great that I started to use it, so what’s position sticky?
Sticky positioning is a hybrid of relative and fixed positioning. The element is treated as relative positioned until it crosses a specified threshold, at which point it is treated as fixed positioned.
– Mozilla Foundation
Wauw, isn’t that awesome? No need for JavaScript anymore when you’re building your dynamic fixed headers. So how do I use it:
.sticky { position: sticky; top:0; }
Remember that you need to specify a threshold either top, right, bottom or left. Otherwise, it will be indistinguishable from relative positioning.
But it doesn’t work
I had some issues getting it to work on an older site I did some updates on. After some “fun” investigation looking at the DOM I found out that a parent div was having overflow:hidden
which means that the browser can’t calculate when the element has to be sticky.
Another gotcha but expected behavior is that once a parent with a sticky child goes out of view, the sticky element will also no longer stick.
TOP, you made my Day! 🙂
Thanks for this —
However, I had a table where “sticky” worked in Firefox but not in Chrome
The problem was that the table was set to
.style.display = ‘block’;
To solve the problem I changed this to:
.style.display = ‘table’;
Thanks a lot
Also I found out today that if you put a element to make a line between you child elements in your sticky element it doesn’t work.
Still Not working
Hi! So how exactly do you remove “overflow: hidden?”
Thanks!!
In your CSS see if any parent has overflow:hidden. If so try to uncommet/delete it. If you know developer tools you can inspect the DOM there and try to uncheck the overflow style
thanks
my div elements have set to max-property but not set to overflow any parents but then my sticky element is not working so now what should i do??????
overflow: scroll; and overflow: auto; also break the sticky-ness
Thank you very much! Owerflow:hidden was apply in sub.parrent block…
Thanks a lot !!!
Awesome. it worked bruh
Live long and prosper, my friend! Thank you a lot!
Thanks!! 🙂
Damned overflow !!
Thank you sooo much !
Thank you! Saved me a lot of time!
wow I just unchecked the overflow: hidden and everything was back to normal, but it’s a little sad that both can’t be used.
Dang. This helped a lot!
It might help you
https://www.code-sample.com/2020/01/position-sticky-not-working-in-ie11-edge.html
Thanks
Thank you! I almost gave up but found here the solution to my problem.
yeah its working…. thank you for this one…..
How to make it work in IE11?
it’s not working … please help
Send me code of position sticky on my email amitsilori123@gmail.com
No way bro. jajajajaja This really was the problem. Thank you very much!
oooh! you are the best <3
Thank you!!! Another life saved!
VERY MUCH THANKS
Thank you!
What do you do if you need to have overflow:hidden? Ex. A really wide table with a horizontal scrollbar, that also needs position:sticky on the “th” elements to have a fixed header. Been trying to solve this for a week now
Another thanks! Been struggling for days to make it work on Firefox (while it was working on Chrome) and thought it was a Firefox bug. But removing overflow:hidden solved it in a second across all browsers.
Thank You!!
Thank you much.. really helpful.. (Y)
Really helpful…. Thanks much 🙂
thank you!!!
great
Livesaver! Thanks for your post!
This is a great help – the post tag interface isn’t as nice. Thanks!
Thank you! I always run into this issue.
Great ! Thanks. Great many thanks ! 🙂
Thank you so much bro
Thanks a lot! Been trying to figure this out for daysss
Thanks so much, I used a lot time find this solution!
Perfect, bro!
Thanks a lot @dinbror! You saved me hours 🙂 (2)
one of my div might have overflow hidden now how can i use position sticky !
just to let you know – if ever you have dropped out all your Overflows … there’s another issue with sticky and z-Indexes!
Can you provide more details? What’s the issue with z-index?
I think it just needs a higher z-index than the elements it needs to go over.
Thanx! You saved me hours 🙂
Thank you so much, bro, you save my life haha 😀
I found that my body class have an overflow hidden that bit me so hard for a long time!!!
Thanks again!!
Awesome! I couldn’t figure out why it wouldn’t work. Since it worked on another site, I figured it was some rule that was breaking it.
Thank you so much! Overflow:hidden bit me so hard… you are a life-saver!