如何自定义Bootstrap Scrollspy，根据滚动位置修改导航链接颜色？

Bootstrap Scrollspy的核心逻辑是：页面滚动到对应锚点区域时，自动给匹配的导航链接添加active类。要修改激活状态的颜色，只需通过CSS覆盖这个类的默认样式即可，具体实现如下：

1. 编写自定义CSS #

针对不同类型的导航元素（普通导航链接、下拉菜单链接）分别设置样式，注意选择器优先级要和Bootstrap默认样式匹配，确保能覆盖原有样式：

/* 普通.nav-pills导航的激活链接样式 */
.nav-pills .nav-link.active {
  color: #ff0000; /* 改为红色 */
  /* 可选：修改背景色，默认是主题色，这里设为透明 */
  background-color: transparent;
}

/* 下拉菜单中激活链接的样式 */
.dropdown-menu .dropdown-item.active {
  color: #ff0000; /* 改为红色 */
  /* 可选：自定义背景色 */
  background-color: #f8f9fa;
}

2. 完整代码示例 #

将自定义CSS放在Bootstrap样式之后，确保优先级生效：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  .nav-pills .nav-link.active {
    color: #ff0000;
    background-color: transparent;
  }

  .dropdown-menu .dropdown-item.active {
    color: #ff0000;
    background-color: #f8f9fa;
  }
</style>
<nav id="navbar-example2" class="navbar bg-body-tertiary px-3 mb-3">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading1">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#scrollspyHeading2">Second</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
      <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#scrollspyHeading3">Third</a></li>
        <li><a class="dropdown-item" href="#scrollspyHeading4">Fourth</a></li>
        <li>
          <hr class="dropdown-divider">
        </li>
        <li><a class="dropdown-item" href="#scrollspyHeading5">Fifth</a></li>
      </ul>
    </li>
  </ul>
</nav>
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-body-tertiary p-3 rounded-2" tabindex="0">
  <h4 id="scrollspyHeading1">First heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading2">Second heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading3">Third heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading4">Fourth heading</h4>
  <p>...</p>
  <h4 id="scrollspyHeading5">Fifth heading</h4>
  <p>...</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

关键注意事项 #

• 自定义CSS必须放在Bootstrap的CSS之后加载，才能覆盖默认样式
• 如果使用.nav-tabs而非.nav-pills，需将选择器改为.nav-tabs .nav-link.active
• 尽量避免使用!important，优先通过匹配选择器优先级来覆盖样式，更符合CSS规范

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