Bootstrap Scrollspy不起作用：Scrollspy不是函数

Question

我正在制作一个页面的网站，并且试图获取导航栏链接以反映您所在页面的哪个部分。我尝试通过HTML使用它，但没有成功。我在包含我的不同部分的容器上有此代码

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

并将身体设置为相对。

由于这不起作用，我尝试将Scrollspy与javascript一起使用

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

也没有运气。我在引导CDN之前有jQuery CDN，但是在控制台中收到此错误。未捕获的TypeError：$（...）。scrollspy不是函数

CodePen：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 });

Answer 2

我从 bootstrap 4.5 迁移到 5.0 时遇到了同样的问题。修复方法是替换：

$('body').scrollspy({ target: '#navbar-example' })

和：

var scrollSpy = new bootstrap.ScrollSpy(document.body, {
  target: '#navbar-example'
})

请参阅引导文档： https://getbootstrap.com/docs/5.0/components/scrollspy/#methods