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

Question

我正在制作一个只有一个页面的网站，我正在尝试让导航栏链接来反映你所在页面的哪个部分。我尝试过通过HTML使用它，但没有成功。我在容器上有这个代码，其中包含我的不同部分

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

并且body被设置为relative。

因为那不起作用，所以我试着在javascript中使用Scrollspy

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

也不走运。我在bootstrap CDN之前有jQuery CDN，但是我在控制台中得到了这个错误。未捕获TypeError：$(...).scrollspy不是函数

CodePen：https://codepen.io/kjardine/pen/VqEbaz

Answer 1

如果你检查你的控制台，你会看到一个错误。Bootstrap 4(目前)需要额外的js脚本才能正常运行。在Bootstrap4js文件前添加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