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

Avatar of Chris Coyier
Chris Coyier on

Take the pain out of building site search with the Algolia hosted API. Start free now!

Download Video
(Only MVP Supporters can download original high-quality recordings for offline viewing.)

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: