Bootstrap5.2 Scrollspy导航高亮效果失效问题求助

一、先确认Scrollspy基础配置的正确性 #

Scrollspy要正常触发激活状态，必须满足以下几个前提：

• 滚动容器（一般是<body>）需添加data-bs-spy="scroll"、data-bs-target="#你的导航容器ID"属性，同时确保容器有position: relative样式（<body>通常无需手动添加，Bootstrap会默认处理）
• 导航链接的href属性必须和页面对应章节的id完全匹配，比如<a href="#contact">Contact</a>必须对应页面里的<section id="contact">...</section>
• 所有被监听的章节元素必须设置唯一且有效的id值

二、给激活状态的链接配置与hover一致的样式 #

你已经设置了青色的hover样式，只需要给导航链接的.active类同步相同样式即可，示例代码如下：

/* 假设你的导航链接使用Bootstrap默认的.nav-link类 */
.nav-link:hover,
.nav-link.active {
  color: #0dcaf0; /* 替换成你实际使用的青色值 */
  /* 若hover还有其他样式（比如下划线），也需要同步到.active类 */
}

三、排查常见失效场景 #

• 如果导航是固定在顶部的，需要给滚动容器添加data-bs-offset属性，比如data-bs-offset="70"（数值等于导航栏的高度），避免滚动到章节时高亮错位或延迟
• 用浏览器开发者工具（F12）查看激活状态的链接，检查是否有更高优先级的CSS样式覆盖了.active类的青色样式，若有则需要提升.active类的优先级（比如加上父元素选择器）
• 确认Bootstrap的JS文件（bootstrap.bundle.min.js，需包含Popper）已正确引入，Scrollspy依赖该JS才能正常工作

举个完整的配置示例：

<body data-bs-spy="scroll" data-bs-target="#main-nav" data-bs-offset="70">
  <!-- 导航容器 -->
  <nav id="main-nav" class="navbar fixed-top">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#home">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </nav>

  <!-- 页面章节 -->
  <section id="home">...</section>
  <section id="contact">...</section>
</body>

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