如何检测滚动至元素下方并添加固定类（禁用position:sticky）

需求 #

检测滚动行为，当滚动到指定元素位置及下方时，给目标元素添加类使其固定在顶部；滚动回该元素上方时移除类，不能使用CSS position:sticky。

当前问题 #

使用IntersectionObserver实现时，因仅通过!entry.isIntersecting判断，导致元素完全不在视图中（比如滚动到页面最底部）时，目标元素依然会被加上fixed类，不符合预期。

现有代码示例 #

const watcher = document.querySelector('.watcher');
const evu = document.getElementById('box');

const createObserver = () => {
  const options = {
    root: null,
    trackVisibility: true,
    delay: 100,
    threshold: [.9]
  }

  const handler = (entries) => {
    entries.forEach((entry) => {
      entry.target.nextElementSibling.classList.toggle('fixed', !entry.isIntersecting);
    })
  }

  if ('IntersectionObserver' in window) {
    const observer = new window.IntersectionObserver(handler, options);
    observer.observe(watcher);
  }
};

解决方案 #

问题核心是未区分元素离开视口的方向——只判断了是否相交，没确认元素是滚到视口上方还是下方。可以通过entry.boundingClientRect.top判断元素位置，精准触发固定逻辑：

修改后的处理函数如下：

const handler = (entries) => {
  entries.forEach((entry) => {
    const targetEl = entry.target.nextElementSibling;
    // 仅当watcher元素顶部滚出视口上方时，添加fixed类
    if (!entry.isIntersecting && entry.boundingClientRect.top < 0) {
      targetEl.classList.add('fixed');
    } else {
      // 元素回到视口内时移除类
      targetEl.classList.remove('fixed');
    }
  })
}

优化说明 #

• 新增entry.boundingClientRect.top < 0的判断，确保只有目标元素滚出视口上方时才触发固定
• 用明确的add/remove替换toggle，避免边界场景下的误触发，逻辑更清晰
• 彻底解决了滚动到页面底部时，无关场景错误添加固定类的问题

内容的提问来源于stack exchange，提问作者Meek