Bootstrap ScrollSpy 无法正常工作

Question

这是我在使用 http://intern-dev.obrary.com/manufacturer 时遇到问题的页面。

我正在尝试通过 JavaScript 实现 ScrollSpy。这是 js:

<script>$(document).ready(function(){
$(".scroll-area").scrollspy({target: "#myNavbar"}) 
});</script>

这是导航栏的 ID：

<div class="navbar navbar-default navbar-fixed-top" id="myNavbar">

目标class：

<div class="scroll-area" data-spy="scroll" data-offset="50">

该工具的某些功能正在运行，因为在我添加上述内容后，导航栏中的常见问题 link 得到了积极处理。但是活动不会更改为任何其他导航栏元素。

Answer 1

更新

在 bootstrap.min.js 之前声明 jQuery :

<!--jquery 1st, this version but your may be ok : jquery-1.11.2.min.js-->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>

<!--then bootstrap-->
<script src="/js/bootstrap.min.js" type="text/javascript"></script>

DEBUG 在 Chrome 正如你问我：

打开调试器：
- windows : CONTROL+SHIFT + I
- mac: COMMAND+ALT+ I
去Resources tab
展开Frame，然后树取决于您的网站；在您的网站中：(manufacturer)
- 您看到脚本，css 已加载
使用控制台（显示错误...）
- 选项卡console

正如我之前所说，我更喜欢Chrome，但其他导航器可能不错，这取决于您。

Answer 2

进一步调查发现了问题。 ScrollSpy class 必须继续body。这是 body 现在的样子：

  <body class="scroll-area" data-spy="scroll" data-offset="0">

我在 class 和 data-spy 放置的地方制作了一个。我这样做是因为导航栏在 body 内，我假设滚动区域不能同时包含导航栏。但事实并非如此。

所以它现在在 http://intern-dev.obrary.com/manufacturer

工作

Answer 3

我发现如果 ID 以下划线开头（对于其他特殊字符可能也是如此），则 scrollspy 不起作用。通过从我的链接中删除下划线，我能够让它工作。

不起作用：
<h1 id="_Toc423191681">Leasing</h1>
作品：
<h1 id="Toc423191681">Leasing</h1>

Bootstrap ScrollSpy 无法正常工作

Bootstrap ScrollSpy not working properly

twitter-bootstrap

scrollspy

更新

DEBUG 在 Chrome 正如你问我：