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
Kevin Powell
Kevin Powell10mo ago
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.
Joao
Joao10mo ago
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.
MarkBoots
MarkBoots10mo ago
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'
const el = document.querySelector(".myElement")
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
{ threshold: [1] }
);

observer.observe(el);
const el = document.querySelector(".myElement")
const observer = new IntersectionObserver(
([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1),
{ threshold: [1] }
);

observer.observe(el);
Want results from more Discord servers?
Add your server