Bootstrap scollspy 无法运行

Question

我运行在 Bootstrap v5.1 上遇到了 scrollspy 的问题。我正在按照文档中的示例（如下所列）进行操作，但是我无法使其正常工作；滚动时似乎没有任何变化。

当用户在页面上滚动时，根据他们正在查看的部分，我希望导航栏上的相应 link 处于活动状态。

文档： https://getbootstrap.com/docs/5.1/components/scrollspy/
测试站点： https://Test-Site.thatsliams.repl.co
站点代码： https://replit.com/@ThatsLiamS/Test-Site

HTML 大纲

<body data-bs-spy="scroll" data-bs-target="#navbar">
    ...
    <nav id="navbar" class="menu">
    <ul class="nav flex-column">
        <li class="nav-item active"><a class="nav-link" href="#about">About me</a></li>
        <li class="nav-item"><a class="nav-link" href="#skills">Skills</a></li>
        <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
        <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>                
    </ul>
    </nav>
    ...
    <section id="about"> ... </section>
    <section id="skills"> ... </section>
    <section id="services"> ... </section>
    <section id="projects"> ... </section>

</body>

Answer 1

看起来您的代码确实有效，只是将 .active class 添加到 .nav-link 锚标记而不是 .nav-item 列表项。

您的 CSS 是针对 li.active 而不是 a.active

.sidebar .nav li a:hover, .sidebar .nav li.active a {
    color: #1d93e4;
    opacity: unset;
}

试试这个：

.sidebar .nav li a:hover, .sidebar .nav li a.active  {
    color: #1d93e4;
    opacity: unset;
}

这里是如何构造导航的示例（在 .nav-link 中使用 .active class）

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul>

https://getbootstrap.com/docs/5.1/components/navs-tabs/#base-nav

或者像这样...

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled">Disabled</a>
</nav>

Bootstrap scollspy 无法运行

Bootstrap scollspy not functioning

html

css

scrollspy

bootstrap-5

HTML 大纲