Skip to main content

Help CSS position sticky doesn’t work [SOLVED]

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.

One thought on “Help CSS position sticky doesn’t work [SOLVED]

Leave a Reply

Your email address will not be published. Required fields are marked *