Bootstrap导航栏链接滚动时添加active类延迟问题

我太懂这个痛点了！你已经搞定了点击导航链接时的平滑滚动偏移，避开了固定在顶部的导航栏，但Bootstrap默认的导航active状态判断还是死盯着锚点区域顶部到达视口顶部才触发，完全没考虑你那80px的偏移量，对吧？

下面给你两种靠谱的解决办法：

方法1：利用Bootstrap原生Scrollspy的Offset配置 #

Bootstrap自带的Scrollspy组件就是用来处理导航active状态的，你只需要给它加上和滚动偏移一致的offset值就行：

方式A：通过HTML属性设置 #

在你的<body>标签上补充data-offset="80"（如果之前已经有data-spy="scroll"和data-target="#navbar"的话）：

<body data-spy="scroll" data-target="#navbar" data-offset="80">

方式B：通过JavaScript初始化 #

如果是用JS初始化Scrollspy，直接在配置里加上offset: 80：

$('body').scrollspy({
  target: '#navbar',
  offset: 80
});

这样Scrollspy会把80px的偏移量纳入判断逻辑，当锚点区域距离视口顶部80px的时候，对应的导航链接就会自动加上active类，和你的滚动行为完全匹配。

方法2：自定义滚动监听逻辑（适合不想用原生Scrollspy的情况） #

如果你想完全自己控制active类的切换，可以监听页面的滚动事件，手动计算每个锚点的位置并判断：

// 监听滚动事件
$(window).scroll(function() {
  var scrollPos = $(document).scrollTop() + 80; // 加上偏移量
  $('#navbar a').each(function() {
    var target = $(this).attr('href');
    // 排除无效锚点
    if ($(target).length) {
      var targetTop = $(target).offset().top;
      var targetBottom = targetTop + $(target).outerHeight();
      // 判断当前滚动位置是否在目标区域范围内
      if (scrollPos >= targetTop && scrollPos < targetBottom) {
        $('#navbar a').removeClass('active');
        $(this).addClass('active');
      }
    }
  });
});

// 和你已有的点击滚动代码配合使用
$('#navbar').find('a').click(function (event) {
  event.preventDefault();
  var $anchor = $(this);
  $('html, body').stop().animate({
    scrollTop: $($anchor.attr('href')).offset().top - 80
  }, 750);
});

小提醒 #

• 如果你用方法1，记得确保页面已经正确引入了Bootstrap的JS文件（包含Scrollspy组件）
• 两种方法里的80都要和你导航栏的高度保持一致，后续如果导航栏高度调整，记得同步修改这个数值

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