如何通过Intersection Observer实现滚动经过元素时的类切换（向下添加、向上移除）？

我明白你现在的困扰——想用Intersection Observer精准控制按钮的类切换，当元素刚出现在屏幕底部时添加类，向上滚离开时移除，但现在触发时机总是不准，有时候还不生效对吧？咱们来一步步调整代码，解决这个问题。

先说说原代码的核心问题 #

• 触发时机不对：你设置的threshold: 0.1意味着元素要有10%的部分进入视口才会触发回调，而且没有设置rootMargin，没法精准定位到“元素刚出现在屏幕底部”的瞬间。
• 方向判断逻辑有偏差：只用entry.boundingClientRect.top < 0来判断向上滚动，会在元素已经进入视口一部分时才触发，不符合你要的“刚接触底部”的需求。

调整后的解决方案 #

我们可以通过修改rootMargin和threshold来精准控制触发时机，同时优化方向判断的逻辑，确保每次滚动都能准确切换类：

完整代码示例

<h2>ELEMENT</h2>
<button id="fixedBtn">FIXED BUTTON</button>

h2 {
  margin-top: 700px;
  margin-bottom: 700px;
}

button {
  position: fixed;
  top: 0;
  left: 0;
  padding: 8px 16px;
  background: #2196F3;
  color: white;
  border: none;
}

button.hidden {
  background: red !important;
}

// 提前获取按钮元素，避免重复查询DOM
const fixedBtn = document.getElementById('fixedBtn');

const options = {
  root: null,
  // 关键：rootMargin设为0px 0px -100% 0px，意味着视口底部向上收缩100%
  // 只有当元素的顶部刚碰到视口底部时，才会触发相交
  rootMargin: '0px 0px -100% 0px',
  threshold: 0 // 只要有1像素相交就触发
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 判断元素是进入还是离开视口
    if (entry.isIntersecting) {
      // 向下滚动：元素刚出现在屏幕底部，添加hidden类
      fixedBtn.classList.add('hidden');
    } else {
      // 向上滚动：元素离开屏幕底部，移除hidden类
      fixedBtn.classList.remove('hidden');
    }
  });
}, options);

// 监听所有h2元素
document.querySelectorAll('h2').forEach(el => {
  observer.observe(el);
});

代码逻辑解释 #

1. rootMargin的作用：'0px 0px -100% 0px'相当于把视口的“触发线”设在了视口的底部边缘，只有当元素的顶部刚好碰到这个边缘时，才会触发相交事件，完美契合你要的“元素刚出现在屏幕底部”的需求。
2. threshold设为0：确保只要元素和视口有1像素的交集就触发回调，不会错过精准的触发时机。
3. 简化方向判断：因为我们设置的rootMargin，当元素进入视口时一定是向下滚动导致的，离开时一定是向上滚动导致的，所以直接用isIntersecting就能判断该添加还是移除类。

如果你的场景更复杂，需要区分不同的滚动方向细节，还可以额外跟踪上一次的滚动位置来辅助判断，但上面的代码已经能解决你当前的核心需求啦。

备注：内容来源于stack exchange，提问作者Runnick