如何使用Intersection Observer替代window.onscroll实现导航栏与回到顶部按钮滚动效果

原有代码的核心错误 #

• 你调用document.querySelector('nav')返回的是单个DOM节点，不是节点集合，后续调用navbars.forEach会直接抛出类型错误，代码直接中断执行
• Intersection Observer的监听逻辑完全不匹配需求：你直接监听导航栏本身，而你的导航栏是sticky定位始终在视口顶部，永远处于相交状态，根本触发不了状态切换
• 完全没有处理回到顶部按钮的显示逻辑，导航栏的active类切换逻辑也和你要的滚动阈值要求不匹配

正确实现步骤 #

步骤1：添加两个滚动哨兵节点 #

在页面<body>的最开头插入两个不可见的哨兵节点，用于标记300px和600px的滚动阈值：

<div class="scroll-sentinel" id="sentinel-300" style="position: absolute; top: 300px; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;"></div>
<div class="scroll-sentinel" id="sentinel-600" style="position: absolute; top: 600px; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none;"></div>

步骤2：替换为正确的Intersection Observer逻辑 #

const navbar = document.querySelector('nav');
const scrolltotop = document.querySelector('.scrolltotop');
const sentinel300 = document.querySelector('#sentinel-300');
const sentinel600 = document.querySelector('#sentinel-600');

// 配置Observer，向上滚动时也能触发检测
const observerConfig = {
  rootMargin: '0px 0px 0px 0px',
  threshold: 0
};

const scrollObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 哨兵元素离开视口顶部，说明滚动超过了对应阈值
    if (entry.target.id === 'sentinel-300') {
      entry.isIntersecting ? navbar.classList.remove('nav-active') : navbar.classList.add('nav-active');
    }
    if (entry.target.id === 'sentinel-600') {
      entry.isIntersecting ? scrolltotop.classList.remove('scrolltotop-active') : scrolltotop.classList.add('scrolltotop-active');
    }
  });
}, observerConfig);

// 监听两个哨兵节点
scrollObserver.observe(sentinel300);
scrollObserver.observe(sentinel600);

步骤3：确认样式生效 #

你现有的CSS代码不需要修改，已经可以匹配JS添加的类名实现样式切换。

可选优化：无需额外插入DOM的实现方案 #

如果你不想在页面额外插入哨兵节点，可以用节流优化原有onscroll逻辑，性能和Intersection Observer基本一致，代码更简洁：

const navbar = document.querySelector('nav');
const scrolltotop = document.querySelector('.scrolltotop');
// 节流逻辑，限制100ms最多执行一次回调
let ticking = false;
window.addEventListener('scroll', () => {
  if (!ticking) {
    window.requestAnimationFrame(() => {
      const scrollY = window.scrollY;
      scrollY > 300 ? navbar.classList.add('nav-active') : navbar.classList.remove('nav-active');
      scrollY > 600 ? scrolltotop.classList.add('scrolltotop-active') : scrolltotop.classList.remove('scrolltotop-active');
      ticking = false;
    });
    ticking = true;
  }
});

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