Target something using Position:Sticky if it's reached the bottom
I love position:sticky it works great as a hassle free to make objects follow the users window. Does anyone know of a way I can adjust something in CSS if that sticky element has reached the bottom?
3 Replies
Right now, there's no way to track the "state" of a sticky element. There is a proposal for a
:stuck
attribute or some variation of that, so you could style it depending on if it's sticking or not, but I have no idea what the current state of that is, or if it's even making any progress at all.
There is probably a hacky way to do it with an Intersection observer.Without any CSS options right now, I would then use JavaScript but I'm not sure that Intersection Observer is the right tool, unless I'm misunderstanding something. What do you mean by "reached the bottom"? I assume you mean the bottom of the page? If that's the case it's probably best to track how far down the user has scrolled down, and when reached a certain point (in this case 100% of the document height) run some function that queries the dom for elements with a specific class or data attribute.
here an article by Chris Coyier on how to do it with intersection observer https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/
just a couple of lines js to add a class when the element 'is-pinned'