Bootstrap Scrollspy 不工作：Scrollspy 不是函数答案

【问题标题】：Bootstrap Scrollspy not working: Scrollspy is not a functionBootstrap Scrollspy 不工作：Scrollspy 不是函数
【发布时间】：2019-01-10 23:38:27
【问题描述】：

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

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

并且正文设置为相对。

由于这不起作用，我尝试使用 Scrollspy 和 javascript 使用此

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

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

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

【问题讨论】：

你应该加载两次jquery，请检查一下，或者上传完整代码
如何加载两次？把CDN放到HTML里就行了两次？
我添加了完整的代码
您不需要添加两次jQuery。不过，您的笔中缺少bootstrap.js。此外，在您的部分中有内容之前，您可能看不到卷轴间谍的全部荣耀。如果这些部分非常窄/薄，它可能看起来像是跳过了部分。
我添加了 bootsrap.js，但 scrollspy 仍然无法正常工作。无论您在哪个部分，它都会点亮“联系我”部分。此外，出于隐私原因，我从 codepen 中删除了一些内容。

标签： javascript html scrollspy

【解决方案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 });

【讨论】：

【解决方案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

【讨论】：