#205: Sticky Positioning: How it Works, What Can Break It, and Dumb Tricks

Avatar of Chris Coyier
Chris Coyier on (Updated on )

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

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, or right.
  • You’re looking in an old-Safari browser and didn’t use -webkit-sticky as 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: