javascript - Bootstrap Scrollspy 不工作 : Scrollspy is not a function

Question

我正在制作一个单页网站，我正在尝试让导航栏链接反射(reflect)您所在页面的哪个部分。我试过通过 HTML 使用它但没有成功。我在包含不同部分的容器上有这段代码

<div class="container" data-spy="scroll" data-target="#navbar">

并且正文设置为相对的。

因为那行不通，我尝试将 Scrollspy 与 javascript 一起使用

$('.container').scrollspy({ target: '#navbar' })

同样没有运气。我在 Bootstrap CDN 之前有 jQuery CDN，但我在控制台中收到此错误。未捕获的类型错误:$(...).scrollspy 不是函数

代码笔:https://codepen.io/kjardine/pen/VqEbaz

Answer 1

如果你检查你的控制台，你会看到一个错误。 Bootstrap 4(目前)需要额外的 js 脚本才能正常运行。在 Bootstrap 4 js 文件之前添加 popper.js，Scrollspy 应该可以正常工作。这是 cdn:https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js .

我还建议添加一点偏移量来补偿导航栏的高度。这样，链接将在滚动或单击时适时亮起。你可以在你的 JS 中这样做:

$('body').scrollspy({ target: '#navbar-example', offset: 50 });