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>
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
文件)
希望这可以帮助别人有类似的问题!
根据所提供的信息,这是很难辨别其中实际问题的来源。我的猜测是,你错过了来自github的滚动导航模板的依赖关系,但我可能是错的。
如果您没有在其package.json文件中包含jQuery.easing
,那可能是问题所在。
我已经把你使用的代码放到了一个codepen项目中,并且能够使用jQuery 3.2.1
和jQuery-easing 1.4.1
工作。
您可以浏览它here。
我有jQuery easing包括,它是必要的滚动触发器。你的例子不适合我吗?当您点击链接(我也可以开始工作)时,它会将滚动动画添加到该部分,但当您滚动时指示您位于该部分(滚动位)时链接不会更改状态 – Ailis
好的。在添加不同版本的jQuery时遇到了一些问题。你可以在这里查看(https://codepen.io/cowanjt/pen/zEGYLQ)。 – cwanjt
你改变了什么?当我看着你的两个例子时,插入的javascript文件都是一样的,我查了一下,我使用的是与你所有文件相同的版本。据我所见,我的代码与你的代码相同 – Ailis