Question

我意识到这是this question的副本，但是在那里给出的答案并没有使用scrollspy插件，而是写出所有的javascript来突出显示滚动的活动链接。

我已经完成了这个问题的所有其他迭代，但是我的代码与给出的解决方案看起来相同，所以我不确定问题。（大多数其他问题也不适用于bootstrap 4 beta，而是早期版本）

我使用this scrolling nav template中的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使其工作。

您可以查看here。

Answer 2

SO。为了解决这个问题，我意识到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的样式并将这些类复制/粘贴到我的自定义CSS文档中）

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

bootstrap 4 beta scrollspy无效

2 个答案: