jQuery固定导航滚动高亮失效 所有链接均加active类问题

现有代码失效原因 #

• 类操作逻辑顺序错误：遍历区块时先给匹配链接添加active类，紧接着全局移除所有导航链接的active类，新增的类直接被清除
• 区块可视判断逻辑缺失：仅判断滚动高度是否大于区块顶部偏移，未判断滚动高度是否超出区块底部范围，导致所有滚动经过的区块都会触发匹配逻辑
• 缺少点击交互逻辑：仅实现了滚动事件监听，未编写点击导航链接时的类切换逻辑
• 细节问题：未计算固定导航栏自身高度，高亮触发时区块顶部会被导航栏遮挡，匹配时机不准；HTML中区块元素重复声明class属性属于语法冗余

修正步骤 #

1. 修正HTML冗余属性 #

将区块列表中重复的class声明删除，修正后代码如下：

<ul>
  <li class="block" id="services">services</li>
  <li class="block" id="action">action</li>
  <li class="block" id="method">method</li>
</ul>

2. 替换原有jQuery代码 #

$(document).ready(function(){
  "use strict";
  // 获取固定导航栏高度，修正锚点偏移
  const navOffset = $('.navbar').outerHeight();

  // 导航点击高亮逻辑
  $('.navbar-nav .nav-link').not('.disabled, .dropdown-toggle').on('click', function(){
    $('.nav-link').removeClass('active');
    $(this).addClass('active');
  })

  // 滚动自动高亮逻辑
  $(window).on('scroll', function(){
    const currentScroll = $(this).scrollTop();
    // 先清空所有高亮
    $('.nav-link').removeClass('active');

    // 顶部Home区块判断：滚动位置未到第一个区块时，Home高亮
    if(currentScroll < $('#services').offset().top - navOffset){
      $('.nav-link[href="#"]').addClass('active');
      return;
    }

    // 遍历匹配当前可视区块
    $('.block').each(function(){
      const blockTop = $(this).offset().top - navOffset;
      const blockBottom = blockTop + $(this).outerHeight();
      if(currentScroll >= blockTop && currentScroll < blockBottom){
        $(`a.nav-link[href="#${$(this).attr('id')}"]`).addClass('active');
        return false; // 匹配成功后终止遍历，减少无效计算
      }
    })
  })

  // 页面初始化时触发一次滚动逻辑，适配刷新/直接进入子锚点的场景
  $(window).trigger('scroll');
});

3. 可选优化（平滑滚动） #

在CSS中添加如下规则，实现锚点跳转的平滑过渡效果：

html {
  scroll-behavior: smooth;
}

实现效果 #

• 滚动页面时，仅当前可视区域对应的导航链接保留active类，其余链接自动移除该类
• 点击可用导航链接时，自动将active类切换到当前点击项，其余链接同步移除高亮
• 修正了固定导航栏遮挡区块的偏移问题，高亮触发时机与区块实际展示位置完全匹配
• 页面初始加载时会自动根据当前滚动位置设置正确高亮，不会出现默认高亮错误

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