bootstrap 4 beta scrollspy不起作用

Question

我意识到这是这个问题的重复，但是给出的答案没有使用scrollspy插件，而是写出了所有JavaScript以突出显示滚动中的活动链接。

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

单击链接时，我正在使用此滚动导航模板中的javascript文件向下滚动到某个部分。 这可行，因此所有链接均通过其ID正确连接到这些部分。

模板的JS文件具有内置的JS来激活scrollspy，但不适用于我。

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

我还尝试了将data-spy和data-target应用于body标签的方法。

我已经为.active类设置了样式，但是在此之前和之后，我都在chrome中检查了我的页面，并且在.active类未应用于链接，因此我认为问题与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使其工作。

您可以在这里查看 。

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

（这是从引导css中拉出的，我在其中进行了搜索，以找出.active样式，并将这些类复制/粘贴到我的自定义CSS文档中）

希望这可以帮助其他有类似问题的人！