bootstrap 4 beta scrollspy不工作

我意识到这是this question的重复，但给出的答案是没有使用Scrollspy插件，而是写出所有的JavaScript来突出显示滚动上的活动链接。bootstrap 4 beta scrollspy不工作

我已经经历了这个问题的所有其他迭代，我可以找到，但我的代码看起来与给定的解决方案相同，所以我不确定问题。（大多数其他问题也不能用于引导4测试版，而是更早版本）

我使用的是从this scrolling nav template JavaScript文件下来的时候，你点击一个链接，滚动到的部分。这是有效的，所以链接都通过他们的ID正确地连接到部分。

该模板的JS文件具有JS来激活内置滚动条，但它不适用于我。

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

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

我已经设计了.active类，但是在做这个之前和之后，我检查了我的页面，并且.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>

来源

2017-09-14 Ailis

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

（这是从引导CSS拉，我搜索通过它来计算出.active是如何被风格化&只需复制/粘贴这些类到我的自定义CSS文件）

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

来源

2017-09-14 22:27:09 Ailis

根据所提供的信息，这是很难辨别其中实际问题的来源。我的猜测是，你错过了来自github的滚动导航模板的依赖关系，但我可能是错的。

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

我已经把你使用的代码放到了一个codepen项目中，并且能够使用jQuery 3.2.1和jQuery-easing 1.4.1工作。

您可以浏览它here。

来源

2017-09-14 18:20:42 cwanjt

我有jQuery easing包括，它是必要的滚动触发器。你的例子不适合我吗？当您点击链接（我也可以开始工作）时，它会将滚动动画添加到该部分，但当您滚动时指示您位于该部分（滚动位）时链接不会更改状态 – Ailis

好的。在添加不同版本的jQuery时遇到了一些问题。你可以在这里查看（https://codepen.io/cowanjt/pen/zEGYLQ）。 – cwanjt

你改变了什么？当我看着你的两个例子时，插入的javascript文件都是一样的，我查了一下，我使用的是与你所有文件相同的版本。据我所见，我的代码与你的代码相同 – Ailis

bootstrap 4 beta scrollspy不工作

回答

相关问题