引导 scollspy 不起作用答案

【问题标题】：Bootstrap scollspy not functioning引导 scollspy 不起作用
【发布时间】：2021-12-28 22:54:09
【问题描述】：

我在 Bootstrap v5.1 上遇到了 scrollspy 问题。我正在关注文档中的示例（如下所列），但是我无法让它工作；滚动时似乎没有任何变化。

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

文档： 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>

【问题讨论】：

我猜你必须用div 来包装那些sections data-bs-spy="scroll" 目前你包括导航菜单而不是仅部分，另外请不要忘记包括它的javascript依赖项

标签： html css bootstrap-5 scrollspy

【解决方案1】：

看起来您的代码实际上正在运行，只是 .active 类被添加到 .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 类）

<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>

【讨论】：