滚动页面时导航栏active状态无法自动切换实现问题求助

问题原因 #

• 滚动监听逻辑里activeLink仅写了函数名没有执行，且该函数依赖点击事件触发时的this指向当前导航项，直接调用无法绑定正确的目标元素
• 没有匹配当前可视区域section和对应导航项的关联逻辑，找不到要加active类的目标导航
• 计算偏移时没有预留导航栏固定高度的偏移误差（如果导航是fixed定位会出现高亮切换不准的问题）

修正后JS代码 #

let sections = document.querySelectorAll('section')
let lists = document.querySelectorAll('.list');

// 原有点击切换逻辑保留
function activeLink(){
    lists.forEach((item) =>
    item.classList.remove('active'));
    this.classList.add('active');
}
lists.forEach((item) =>
item.addEventListener('click',activeLink));

window.onscroll = () =>{
  let top = window.scrollY;
  // 可根据导航实际固定高度调整偏移值，没有固定导航就设为0
  let navOffset = 60;
  sections.forEach(sec =>{
    let offset = sec.offsetTop - navOffset;
    let height = sec.offsetHeight;
    let id = sec.getAttribute('id');
    if(!id) return; // 跳过没有id的section

    if(top >= offset && top < offset + height){
      // 匹配对应section的导航项
      let targetNav = document.querySelector(`.list a[href="#${id}"]`)?.parentElement;
      if(targetNav){
        lists.forEach(item => item.classList.remove('active'));
        targetNav.classList.add('active');
      }
    }
  })
};

注意事项 #

• 确保页面内每个section都有对应的id，和导航a标签的href属性值（去掉#后）完全对应，你当前代码里第四个导航href是#，需要补充对应section的id并修改href为#对应的id值
• 可选优化：如果觉得滚动触发太频繁，可以给滚动事件加防抖处理，减少函数执行次数

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