Detecting When a Sticky Element Gets Pinned
Developers have long wished for a native CSS way to know whether a position: sticky; element is actively pinned. As David Walsh points out, an ideal solution would be a dedicated :stuck pseudo-class — but no such directive exists in the spec today.
The workaround, however, is refreshingly lightweight. Instead of reaching for a bulky polyfill, you can combine a few lines of IntersectionObserver JavaScript with a clever use of top: -1px in your CSS. This trick lets you detect the exact moment the element becomes sticky and apply a class accordingly.
