2

I wanted to add a class when the header was sticky but with a condition that it should not be with respect to viewport. It should be viewport plus some top ( css ) value. My sticky component is having a top property to adjust from where it will sticky with respect to viewport.

I tried many things such as changing rootMargin but was unsuccessful, some help would be appreciated

const stickyElm = document.querySelector('.automations-dashboard > div > span:nth-child(3)');
const observer = new IntersectionObserver(
  ([e]) => e.target.classList.toggle('isSticky', e.intersectionRatio < 1),
  { rootMargin: '0px 0px 0px 0px' }
);
if (stickyElm) observer.observe(stickyElm);

Reference SO - Event to detect when position:sticky is triggered

theFrontEndDev
  • 890
  • 1
  • 17
  • 41
  • 3
    Try to use this tip: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ and working example – Oleg May 08 '22 at 04:39
  • @Oleg Already saw this approach, but idk what changes should I make to add class when IntersectionObserver stick some px from the top rather than at the viewport – theFrontEndDev May 08 '22 at 04:48
  • Did you read this discussion: https://stackoverflow.com/questions/16302483/event-to-detect-when-positionsticky-is-triggered – Oleg May 08 '22 at 05:01

0 Answers0