Bootstrap 3.3.6导航栏最后按钮始终active无法清除

看起来你遇到的是Bootstrap ScrollSpy组件（或自定义滚动监听脚本）的默认行为问题，结合你的代码和描述，我来帮你分析并给出解决方案：

问题根源分析 #

从你“调换按钮顺序后，新的最后一个带page-scroll的按钮会自动被添加上active”的描述来看，大概率是ScrollSpy的匹配逻辑导致的：

• Bootstrap的ScrollSpy会监听页面滚动，自动给对应当前视口区域的导航项添加active类
• 当页面滚动到最底部，或者最后一个锚点对应的section占据了视口底部区域时，ScrollSpy会默认把最后一个匹配的导航项设为active
• 另外，你代码中那个隐藏的#page-top导航项，如果页面顶部没有对应的id="page-top"元素，也可能干扰ScrollSpy的匹配逻辑

具体解决方案 #

1. 检查并修正ScrollSpy初始化配置 #

首先确认你的页面是否正确初始化了ScrollSpy，通常是在<body>标签上添加属性：

<body data-spy="scroll" data-target=".navbar-ex1-collapse" data-offset="100">

• data-offset：设置滚动时距离顶部的偏移量，建议设为导航栏的高度（比如你的导航栏如果是100px高，就设为100），这样滚动到section时不会提前触发active状态
• 确保每个导航项的href（比如#registration、#coaches、#contact）都对应页面中存在的id元素，比如：

  <section id="registration" class="registration-section">...</section>
  <section id="coaches" class="coaches-section">...</section>
  <section id="contact" class="contact-section">...</section>
  

2. 确保隐藏的#page-top导航项正常工作 #

你添加的隐藏li是用来在滚动到页面顶部时移除其他导航项的active类，需要确保：

• 页面最顶部存在<div id="page-top"></div>元素（放在<body>的最开头）
• 这个隐藏li的位置在.nav的最前面（你的代码已经符合要求）

3. 强制页面加载时滚动到顶部 #

如果页面加载时默认滚动到底部（比如浏览器记住了上次滚动位置），会导致ScrollSpy自动给最后一个导航项加active，可以在页面加载时强制滚动到顶部：

$(document).ready(function() {
    $('html, body').scrollTop(0);
});

4. 自定义滚动监听逻辑（替代默认ScrollSpy） #

如果默认的ScrollSpy行为不符合需求，你可以手动控制active类的添加，完全自定义逻辑：

$(document).ready(function() {
    // 移除默认的ScrollSpy实例
    $('body').data('bs.scrollspy', null);
    
    // 监听滚动事件
    $(window).scroll(function() {
        var scrollPos = $(document).scrollTop();
        var navHeight = $('.navbar').outerHeight(); // 导航栏高度
        
        // 遍历所有带page-scroll的导航链接
        $('.page-scroll').each(function() {
            var targetId = $(this).attr('href');
            var targetSection = $(targetId);
            
            if (targetSection.length) {
                var sectionTop = targetSection.offset().top - navHeight;
                var sectionBottom = sectionTop + targetSection.outerHeight();
                
                // 判断当前滚动位置是否在目标section范围内
                if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
                    $('.nav li').removeClass('active');
                    $(this).parent('li').addClass('active');
                }
                
                // 滚动到顶部时，激活隐藏的#page-top项（移除所有active）
                if (scrollPos < navHeight) {
                    $('.nav li').removeClass('active');
                    $('.hidden').addClass('active');
                }
            }
        });
    });
    
    // 页面加载时触发一次滚动事件，初始化active状态
    $(window).trigger('scroll');
});

这个脚本会精确控制哪个导航项被添加active类，完全避免默认ScrollSpy的自动匹配问题。

5. 排除不需要参与ScrollSpy的导航项 #

你的Facebook链接不需要参与滚动监听，可以给它的li加一个类，避免干扰：

<li class="no-scrollspy">
  <a href="https://www.facebook.com/groups/225011327510460/?fref=nf">
    <img src="img/FB-f-Logo50px.png" alt="Find us on Facebook!">
  </a>
</li>

然后在CSS里确保它不会被误加active样式：

.no-scrollspy.active {
  background: none;
  /* 覆盖任何active相关的样式 */
}

测试建议 #

先暂时移除自定义的page-scroll脚本（如果有的话），只保留Bootstrap的基础ScrollSpy，测试问题是否还存在，这样可以快速定位是Bootstrap默认组件的问题还是自定义脚本的问题。

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