How to Detect When a Sticky Element Gets Pinned

Avatar of Chris Coyier
Chris Coyier on

Let’s put those CSS skills to work! Claim $50 in free hosting credit on Cloudways with code CSSTRICKS.

Totally agree with David, on CSS needing a selector to know if a position: sticky; element is doing its sticky thing or not.

Ideally there would be a :stuck CSS directive we could use, but instead the best we can do is applying a CSS class when the element becomes sticky using a CSS trick and some JavaScript magic

I love it when there is a solution that isn’t some massive polyfill or something. In this case, a few lines of IntersectionObserver JavaScript and tricky usage of top: -1px in the CSS.

Direct Link →