Question

我正在构建一个单页网站，顶部栏位导航链接到页面上的不同部分。我使用Scrollspy作为<body data-spy="scroll" data-offset="50" id="home">将其链接起来。这很好用。每个部分都在导航中突出显示。

问题在于最后一节。由于它是一个较短的部分而且没有填满整个页面，因此永远不会到达id="contact"，因此导航元素不会突出显示。

我注意到bootstrap examples page当你到达最后一个元素时，它会在到达id之前突出显示 - 但id就像所有的一样位于该部分的顶部其他部分。

我查看了自定义application.js文件，但没有看到任何与滚动行为相关的内容。

任何人都可以对此有所了解吗？

Answer 1

对于某些人来说，这个问题可能是由于怪癖/ DOCTYPE问题造成的。如果您的滚动区域位于正文上，则scrollspy将计算窗口对象的视口高度。如果您使用的是jQuery 1.8.2并且没有正确的DOCTYPE设置，则视口高度的scrollspy计算将返回总高度，从而导致始终选择最后一个项目。

如果你像http://twitter.github.com/bootstrap/javascript.html那样切换回jQuery 1.7.2，那么它会再次运行，或者你可以设置正确的DOCTYPE。

以下是有关“notabug”问题的更多信息：http://bugs.jquery.com/ticket/12426

Answer 2

我自己只是在寻找答案。当涉及到最后一项时，引导程序演示页面确实做了与我的页面不同的事情。我也查看了application.js，但没有看到任何内容。最后我决定比较他们的scrollspy.js和我的版本。他们使用v2.0.4而我有v2.0.2。我用新版本替换了我的版本，它刚刚开始按预期工作。

然后我提到了bootstrap changelog，发现v2.0.3已于2012年4月24日发布。列出的其中一个更改是“如果你到达文档或元素的底部，总是在scrollspy中选择最后一项”

所以我猜他们在我下载bootstrap之后就在内部安静地修复了它。您可能已经想到了这一点，但希望它能帮助其他人寻找相同的答案。

Answer 3

只需将data-offset属性增加到像500那样大的内容，就像这样：

<body data-spy="scroll" data-offset="500" id="home">

bootstrap演示工作正常，因为它也会偏移子空间的高度，以及数据属性上给出的50px偏移量。

Answer 4

我有一个解决方法。在twitter的scrollspy JS的第40行，你会看到：

this.process()

删除它。这样可以巧妙地尝试启动过程方法。但是当你滚动时会对它进行处理，所以只需删除它就可以了。

Answer 5

将HTML doctype声明添加到页面顶部为我修复了它：

<!DOCTYPE html>

Answer 6

在我的情况下，只有将可滚动数据容器设置为<body>元素时，它才有效。

我使用了一个流畅的滚动脚本，结合起来很有效：

$('.sub-nav-collapse .nav li a').live('click',function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop: $($(this).attr('href')).offset().top-70}, 500);
});

希望能帮助别人！

干杯！

Answer 7

使用jQuery 1.8.3和html5 doctype，我发现视口初始比例为1会导致scrollspy失败：

<meta name="viewport" content="width=device-width, initial-scale=1">

我删除了对initial-scale = 1的引用，并且scrollspy开始工作。

twitter Bootstrap Scrollspy突出显示最终元素

7 个答案: