Bootstrap 4 Scrollspy功能失效求助：已按文档配置仍无法运行

我排查了你的代码，发现几个导致Scrollspy无法正常工作的关键问题，逐个修复就能让功能正常运行了：

1. 给导航链接补上nav-link类 #

Bootstrap Scrollspy是通过nav-link类来识别需要标记活跃状态的导航项的，你的<a>标签都缺少这个核心类。修改后的导航项示例：

<li class="nav-item" >
  <a class="nav-link" id="title_boutTheCompany" href="#link-aboutTheCompany">Company</a>
</li>

2. 给Scrollspy目标容器设置相对定位 #

你的目标容器是#test，但它没有设置position: relative——这是Scrollspy正常工作的必要条件，它需要以此容器为基准监听滚动位置。添加如下CSS：

#test {
  position: relative;
}

3. 调整滚动容器与内容的适配 #

你把Scrollspy绑定在body上，需要确保body有合适的滚动行为，同时因为用了固定导航栏，要给页面顶部加内边距避免内容被遮挡：

body {
  padding-top: 70px; /* 可根据导航栏实际高度调整数值 */
}

另外，建议给每个.anchor区域设置足够高度，方便测试滚动时的活跃状态切换：

.anchor {
  height: 600px;
  margin: 20px 0;
}

修正后的完整代码示例 #

HTML #

<body>
  <div id="test">
    <nav class="navbar navbar-default navbar-toggleable bg-faded navbar-light fixed-top" id="navbar" >
      <a class="navbar-brand" href="#">
        <img src="../media/logo.png" class=" align-top" alt="">
      </a>
      <div class="nav-links collapse navbar-collapse col-lg-10 col-md-10 col-sm-9 col-xs-12" id="collapseNav">
        <ul class="navbar-nav" >
          <li class="nav-item" >
            <a class="nav-link" id="title_boutTheCompany" href="#link-aboutTheCompany">Company</a>
          </li>
          <li class="nav-item" >
            <a class="nav-link" href="#link-staff" id="title_Team">Team</a>
          </li>
          <li class="nav-item" >
            <a class="nav-link" href="#link-contacts" id="title_Contact">Contacts</a>
          </li>
          <li class="nav-item dropdown" style="border: none;" >
            <a class="nav-link" href="#link-freeTime" id="title_freeTime">Free Time</a>
          </li>
        </ul>
      </div>
      <div class="navBtn d-sm-none">
        <button class=" navbar-toggler navbar-toggler-right " type="button" data-toggle="collapse" data-target="#collapseNav" aria-controls="collapseNav" aria-expanded="false" aria-label="Toggle navigation" id="toogleIcon">
          <span class="fa fa-angle-down my-toggler" id="faToggler"></span>
        </button>
      </div>
    </nav>
  </div>
  <div class="anchor"></div>
  <div class="anchor" id="link-aboutTheCompany" ><h1>Company</h1></div>
  <div class="anchor" id="link-staff"><h1>Team</h1></div>
  <div class="anchor" id="link-freeTime"><h1>free time</h1></div>
  <div class="anchor" id="link-contacts"><h1>Contacts</h1></div>
</body>

CSS #

#test {
  position: relative;
}

body {
  padding-top: 70px;
}

.anchor {
  height: 600px;
  margin: 20px 0;
}

JS #

$('body').scrollspy({ target: '#test' });

做完这些调整后，Scrollspy就能正常监听滚动位置，自动给对应导航链接添加active类了~

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