> If you need to style something when it is stuck, why not make the css class that made it stuck include that style?
Because the CSS rules that define sticky only defines when something gets stuck, not that it's stuck. Ergo, it can say "this element becomes stuck when it's containing element is 200px from the top edge of the viewport", but until the user actually scrolls the document so that's true, the CSS rules that defined that doesn't make it stuck yet.
Personally, I'd settle for a pseudo class (e.g. `:stuck`, like `:active` I suppose). Currently I use an `IntersectionObserver` to dynamically toggle a `--stuck` class on my stickies, and I can target that as you describe it.
Then part of me feels like CSS shouldn't do the stuck thing at all. That's a job for scripting. There are unlimited behaviours like this you could try to account for declaratively but some JS will do it nicely. The thing about adding this to CSS is you are making CSS more complex with redraw loops as it needs to keep reconfiguring stuff as it gazes into thousands of it's own navels.
Ironic since the reason sticky exists was because developers were sick of managing it in JS. If you truly believe doing it in JS is better, feel free to do it in JS. No one is stopping you.
I wonder if the idea is that adding pseudo-classes for the different things is not really scalable because you would ultimately need to do it for a lot of things -- requiring browsers to implement, test, and maintain custom code for each selector -- and you cannot anticipate every website's needs.
That would be a better framing for this feature. Given that framing, I can now see how it could be useful for things like custom controls not present in the set provided by the browser.
It would be interesting to see if browsers could use this mechanism internally to implement pseudo-classes.
Because the CSS rules that define sticky only defines when something gets stuck, not that it's stuck. Ergo, it can say "this element becomes stuck when it's containing element is 200px from the top edge of the viewport", but until the user actually scrolls the document so that's true, the CSS rules that defined that doesn't make it stuck yet.
Personally, I'd settle for a pseudo class (e.g. `:stuck`, like `:active` I suppose). Currently I use an `IntersectionObserver` to dynamically toggle a `--stuck` class on my stickies, and I can target that as you describe it.