How it works
position: sticky; to an element along with a
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
- You forgot to apply a position threshold like
- 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).
Usings transforms like
rotate(), the behavior of
position: sticky; can get pretty weird, like this “slide by” behavior: