Bootstrap Scrollspy功能异常求助：导航栏激活状态问题

问题描述 #

• 耗时4小时调试Bootstrap Scrollspy，导航栏按钮仅在点击瞬间处于激活状态，滚动时无激活状态切换
• 无法为目标元素设置position: relative，会破坏现有页面布局
• 已在HTML末尾引入Bootstrap JS，查阅大量示例仍未解决，疑惑Scrollspy是否需要单独放置在div中

相关代码 #

<body data-bs-spy="scroll" data-bs-target="#navbar" data-bs-offset="50">
      
    <nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-offset="50" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mx-auto mr-auto">
            <li class="nav-item">
              <a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-md-inline-block" href="#about">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

问题排查与解决办法 #

1. 修正Scrollspy监听容器
   你当前把data-bs-spy="scroll"绑定在<body>上，但如果不能给body加position: relative，可以把监听对象换成包裹所有锚点区块的内容容器（比如<main>或自定义div）：

   • 给内容容器添加data-bs-spy="scroll"、data-bs-target="#navbar"、data-bs-offset="50"属性
   • 给该容器设置position: relative和overflow-y: auto（若需滚动），这样只会影响内容容器，不会破坏其他页面元素

2. 验证锚点区块有效性
   确保页面中存在与导航链接对应的#home、#skills、#projects、#about区块，且这些区块有足够高度，能被Scrollspy检测到滚动位置。若区块被其他定位元素覆盖，也会导致激活状态异常。

3. 手动初始化Scrollspy
   若自动初始化失败（比如DOM未完全加载），可手动初始化：

   document.addEventListener('DOMContentLoaded', function() {
     new bootstrap.ScrollSpy(document.querySelector('.content-container'), {
       target: '#navbar',
       offset: 50
     })
   })
   

   把.content-container替换成你实际的内容容器选择器。

4. 确认导航结构正确性
   你的导航层级符合要求（<li class="nav-item">包含<a class="nav-link">），确保data-bs-target="#navbar"指向的是包含导航列表的父容器，当前设置是正确的。

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