Kevin Powell - Community•11mo ago

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•11mo 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•11mo 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•11mo 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);

Gaming

Programming

Target something using Position:Sticky if it's reached the bottom