Bootstrap 5 Scrollspy高亮错位问题求助：导航链接高亮错误

问题根源 #

1. 重复引入Bootstrap JS文件：代码里连续两次引入bootstrap.bundle.min.js，导致Scrollspy等组件被重复初始化，引发逻辑冲突，造成高亮判断错位。
2. 自定义导航定位干扰计算：给.nav类添加的position: sticky; top: 25%;改变了导航元素的布局上下文，打乱了Scrollspy对滚动位置与目标元素的匹配逻辑。

修复步骤 #

1. 删除重复的Bootstrap JS引入 #

找到代码末尾的重复引入代码并删除，只保留带有完整性校验的那一个：

<!-- 删除这一行 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

2. 调整导航的sticky定位逻辑 #

把原本加在.nav类上的sticky样式，转移到外层的导航容器上，避免干扰内部导航的Scrollspy计算：

/* 替换原.nav类中的sticky设置 */
#navbar-example3 {
  position: sticky;
  top: 25%;
  height: 100vh;
  overflow-y: auto;
}

/* 移除.nav类中的position: sticky; top: 25%; */
.nav {
  --bs-nav-link-padding-x: 1rem;
  --bs-nav-link-padding-y: 0.5rem;
  --bs-nav-link-font-weight: ;
  --bs-nav-link-color: var(--bs-link-color);
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-link-disabled-color: #6c757d;
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

3. 验证基础配置 #

确认滚动容器的data-bs-spy="scroll"、data-bs-target="#navbar-example3"属性正确，导航链接的href与目标元素ID完全匹配（当前代码这部分是正常的）。

内容的提问来源于stack exchange，提问作者Sezer Selman Şenel