How it works
You apply position: sticky; to an element along with a top, left, right, or bottom threshold and it will “stick” in that position when the threshold is passed, as long as there is room to move within the parent container.
What can break it
- You forgot to apply
position: sticky;. - You forgot to apply a position threshold like
top,left,bottom, orright. - You’re looking in an old-Safari browser and didn’t use
-webkit-stickyas the value. - The threshold you applied doesn’t apply in that scroll direction.
- There is no room to move in the parent container.
- A parent element has hidden
overflow(even in a direction that doesn’t matter to the scrolling).
Weird tricks
Usings transforms like scale() and rotate(), the behavior of position: sticky; can get pretty weird, like this “slide by” behavior:
