JavaScript：滚动时如何比使用scrollY > x更精准高亮当前导航对应项

原代码问题分析 #

原实现采用硬编码固定像素作为滚动触发阈值，而不同尺寸显示器、窗口缩放、页面内容动态更新都会导致各板块的实际顶部偏移值发生变化，因此会出现跨设备定位不准的问题。

最优方案：使用 Intersection Observer API #

这是浏览器原生提供的用于监听元素进入/离开视口的API，性能远优于频繁触发的scroll事件，且自动适配各种视口尺寸，无需手动计算像素阈值。

步骤1：优化HTML结构（推荐） #

给每个页面对应板块加统一标识，导航按钮和板块做关联，后续扩展板块无需修改JS逻辑：

<!-- 导航按钮 -->
<a class="nav-btn" data-section="home">HOME</a>
<a class="nav-btn" data-section="about">ABOUT</a>
<a class="nav-btn" data-section="skills">SKILLS</a>
<a class="nav-btn" data-section="contact">CONTACT</a>

<!-- 页面板块 -->
<section class="page-section" id="home">HOME板块内容</section>
<section class="page-section" id="about">ABOUT板块内容</section>
<section class="page-section" id="skills">SKILLS板块内容</section>
<section class="page-section" id="contact">CONTACT板块内容</section>

步骤2：JS实现代码 #

// 获取所有导航按钮和页面对应板块
const navBtns = document.querySelectorAll('.nav-btn');
const sections = document.querySelectorAll('.page-section');

// 配置观察者参数
const observerOptions = {
  root: null, // 以浏览器视口为根元素
  rootMargin: '-10% 0px -85% 0px', // 调整触发区域：当板块顶部进入视口10%位置时触发，可根据业务需求调整
  threshold: 0
};

// 观察者回调函数
const observerCallback = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 先移除所有导航按钮的高亮状态
      navBtns.forEach(btn => btn.classList.remove('highlight'));
      // 给当前可见板块对应的导航按钮加高亮
      const activeBtn = document.querySelector(`.nav-btn[data-section="${entry.target.id}"]`);
      activeBtn.classList.add('highlight');
    }
  });
};

// 初始化观察者，监听所有板块的可见状态
const sectionObserver = new IntersectionObserver(observerCallback, observerOptions);
sections.forEach(section => sectionObserver.observe(section));

参数调整说明 #

修改rootMargin的值即可控制触发高亮的时机：例如希望板块进入视口一半时触发高亮，可调整为'-50% 0px -50% 0px'。该方案无需手动维护像素阈值，自动适配所有屏幕尺寸、窗口缩放场景。

兜底方案：动态计算板块偏移（兼容旧浏览器） #

如果需要兼容不支持Intersection Observer的极旧浏览器，可以在scroll事件中动态获取每个板块的偏移值，避免硬编码像素：

const sections = document.querySelectorAll('.page-section');
const navBtns = document.querySelectorAll('.nav-btn');

// 加节流优化scroll事件触发频率，避免性能损耗
function throttle(func, delay = 100) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, delay);
    }
  }
}

const highlightNav = throttle(() => {
  const scrollY = window.scrollY;
  sections.forEach((section, index) => {
    const sectionTop = section.offsetTop - 100; // 触发偏移量可自行调整
    const sectionHeight = section.offsetHeight;
    if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {
      navBtns.forEach(btn => btn.classList.remove('highlight'));
      navBtns[index].classList.add('highlight');
    }
  })
})

window.addEventListener('scroll', highlightNav);

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