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