InterSectionObserver-粘性元素与fiewport＆＃x2b;顶级物业

发布于 2025-01-27 00:26:32 字数 489 浏览 3 评论 0原文

我想在标头粘合时添加一堂课，但条件不应该与视口有关。它应该是视口和一些顶部（CSS）值。我的粘性组件是有一个顶级属性，可以从相对于视口粘的位置进行调整。

我尝试了许多事情，例如更改rootmargin，但没有成功，有些帮助将不胜感激

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);

。 “>要检测位置何时触发的事件

原文

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

分享到QQ

分享到微博