I spent a huge chunk of time at work yesterday trying to figure out why the hell webkits implementation of position: sticky, position: -webkit-sticky wasn’t working.
Applying it on the tablet site I was working on had no effect but when I viewed a demo site: http://html5-demos.appspot.com/static/css/sticky.html it works perfectly; so it was not a case of my browser not supporting the feature, It was definitely something in the markup or css that was screwing things up.
After some couple of hours hunting about, I found the culprit:
#bodyconstraint {
overflow: hidden !important;
}
A parent element has got overflow:hidden, and this, apparently throws position: -webkit-sticky off.
So in case you run into a situation where position: -webkit-sticky isn’t working, an heads-up: check to see if the element you want to position as sticky is not a child of a parent element that has had its overflow set to hidden.
Also, you need to set the top property of the element you want to position sticky. if not, it doesn't work too.
28 comments:
Also should not use `body { height: 100% }`.
Thank you! I was in a similar situation yesterday, this made my morning!
Thanks for this. Saved me some serious time ☺
Specifically, it seems to be overflow-x that can't be set to hidden. Two other catches that I've found: 1) you must set top to some value and 2) once a sticky element's parent goes out of view, the element will no longer stick.
Thanks a lot man! This helped me to solve the same problem!
Thanks a lot man! It helped me to solve the same issue!
Huge thanks! It solved same issue on my side!
Thank you! Huge time saver!
I helped. Thanks!
Many thanks! Saved a lot of head scratching! :)
This is still not working in IE and Firefox. :(
Thanks for this, overflow:hidden on a parent was totally my issue.
Also... if the div you set to sticky is wrapped in an anchor tag, that will break the stickiness on Safari too.
Saved me! Thanks!
I'm so furious about the sticky position.
It's not just that its parent element can't be set to overflow:hidden, but NEITHER of its parents can have the overflow:hidden.
What's even worse is that you can't just overwrite it from hidden to visible, but the whole overflow tag MUST be completely absent, otherwise it also won't work.
Saved me! Thanks!
Seems like we need to make sure all the parent elements are not having the overflow: hidden set.
Correct me if i am wrong.
Is there a reasonable explanation for this :D ??? Anyway. Thank you VERY much
Whoa.. 5 years later. This still helped someone.. me (a)
thanx bro, you saved me from wasting so many hours in finding the right solution.
Cara, muito obrigado, esta merda fudeu a minha mente, você me ajudou muito.
Can't believe this post saved me today!
saved a lot of work!..thanks :)
with overflow-x: hidden also not working
but thanks a lot that
Thank you for the solution, In my case, it's body overflow property not mentioned.
Legend
You, sir, are a hero! A huuuuuuuge thanks for sharing the solution.
What is the workaround of you do need for example
overflow-x: hidden; /* Disable horizontal scroll */
on your parent element?
In my case... also when parents have overflow:auto. Very odd!
Post a Comment