bootstrap 4 beta scrollspy 不工作

Question

我知道这是 this question 的副本，但给出的答案没有使用 scrollspy 插件，而是写出所有 javascript 以突出显示活动 link在滚动中。

我已经遍历了几乎所有我能找到的这个问题的所有其他迭代，但我的代码看起来与给出的解决方案中的相同，所以我不确定问题所在。（大多数其他问题也不针对 bootstrap 4 beta，而是针对更早的版本）

我正在使用来自 this scrolling nav template 的 javascript 文件在您单击 link 时向下滚动到某个部分。这行得通，因此 link 都通过其 ID 正确连接到这些部分。

模板的 JS 文件有 JS 来激活内置的 scrollspy，但它对我不起作用。

body的位置设置为相对位置。 jQuery.js 文件放在 bootstrap.js 文件之前。

我也尝试过将data-spy和data-target应用到body标签的方法。

我已经为 .active class 设置了样式，但是在执行此操作之前和之后，我检查了 chrome 中的页面以及 .active class 在您滚动时未应用于 links，因此我认为问题与 CSS.

无关

这里是 javascript:

$('body').scrollspy({
    target: '#mainNav',
    offset: 0
  });

和代码：

<nav class="navbar navbar-expand-md navbar-dark fixed-top" id="mainNav" style="margin-bottom:0;padding-bottom:0;">
  <div class="container-fluid">
    <a class="navbar-brand js-scroll-trigger" href="#page-top"><img class="img-fluid" src="backgroundimages/logoSmall.png"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarResponsive">
    <ul class="navbar-nav">
      <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#howto" style="display:block;">How to Use</a>
      </li>
      <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#Mappy" style="display:block;">Map</a>
      </li>
        <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#about" style="display:block;">About</a>
      </li>
        <li class="nav-item navMenuBox">
        <a class="nav-link js-scroll-trigger" href="#contact" style="display:block;">Contact</a>
      </li>
    </ul>
  </div>
</div>
</nav>

Answer 1

根据提供的信息，很难确定实际问题出在哪里。我的猜测是您缺少来自 github 的滚动导航模板的依赖项，但我可能是错的。

如果您没有从他们的 package.json 文件中包含 jQuery.easing，那可能是问题所在。

我已经将您使用的代码放入 codepen 项目中，并且能够使用 jQuery 3.2.1 和 jQuery-easing 1.4.1.

使其工作

您可以查看here。

Answer 2

所以。为了解决这个问题，我意识到 spyscroll 主要取决于将 navbar-dark 或 navbar-light 应用于您的 navbar。如果这在文档中，那将非常有帮助！即使我应用了 navbar-dark，因为我假设 .active 状态连接到 nav-links 或 nav-items，我设置了 nav-links 的样式，导致.active 状态不起作用。为了解决我的问题，我将我的自定义样式应用到 .navbar-dark li a，并将我的自定义活动状态应用到

.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .nav-link.active

（这是从 bootstrap css 中提取的，我搜索了它以弄清楚 .active 是如何设计的，只是 copy/pasted 这些类到我的自定义 CSS 文档）

希望这对遇到类似问题的其他人有所帮助！！

bootstrap 4 beta scrollspy 不工作

bootstrap 4 beta scrollspy not working

html

javascript

jquery

scrollspy

bootstrap-4