Monday, June 30, 2025
No menu items!
No menu items!
HomeDesigningHow to Detect When a Sticky Element Gets Pinned

How to Detect When a Sticky Element Gets Pinned

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.

CodePen Embed Fallback

Direct Link to ArticlePermalink


The post How to Detect When a Sticky Element Gets Pinned appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

RELATED ARTICLES

Most Popular

Recent Comments