twitter Bootstrap Scrollspy 突出显示最后一个元素答案

【问题标题】：twitter Bootstrap Scrollspy highlight final elementtwitter Bootstrap Scrollspy 突出显示最后一个元素
【发布时间】：2016-04-11 20:35:21
【问题描述】：

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

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

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

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

谁能解释一下？

【问题讨论】：

标签： javascript twitter-bootstrap

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

【讨论】：

谢谢，这解决了我的问题……不知道我是怎么把 doctype 关掉的！
添加一个而不是旧的帮了我！

【解决方案2】：

我自己只是在寻找这个问题的答案。当涉及到最后一项时，引导演示页面肯定与我的页面不同。我也浏览了 application.js 但什么也没看到。最后我决定比较他们的scrollspy.js和我的版本。他们使用的是 v2.0.4，而我使用的是 v2.0.2。我用新版本替换了我的版本，它刚刚开始按预期工作。

然后我参考了引导程序更改日志，发现 v2.0.3 于 2012 年 4 月 24 日发布。列出的更改之一是“如果您已到达文档或元素的底部，请始终选择 scrollspy 中的最后一项”。

所以我猜他们在我下载引导程序后悄悄地在内部修复了它。您可能也已经想通了，但希望它能帮助其他人寻找相同的答案。

【讨论】：

嗨，乔恩，不，我还没弄明白。我只是在做实验，结果被搁置了。虽然你已经得到了答案，所以谢谢你指出它，我期待在未来的项目中使用它。

【解决方案3】：

只需将您的data-offset 属性增加到更大的值，例如500，如下所示：

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

引导演示工作正常，因为它还偏移了子导航的高度，以及数据属性上给出的50px 偏移量。

【讨论】：

感谢您的回复 - 我相信除了数据偏移之外还有一些更高的力量在起作用。 twitter 示例的最后一部分肯定有不同的行为。另外，如果有较小的部分（示例更新），在我的示例中增加偏移量会导致问题。
@deadlyhifi 你的演示对我来说很好，我也将它导出到 jsfiddle 并且它也可以在数据偏移量为 500 的情况下正常工作，jsfiddle.net/andresilich/cBPgB/5/show
感谢您对此进行调查 - 演示不太正确。如果您拥有全宽浏览器并单击“Cheesehead”，它将带您进入该部分，但突出显示的元素是“联系”。在 Twitter 示例中，最后一部分的行为肯定与其他部分不同。

【解决方案4】：

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

this.process()

只需删除它。这运行了 process 方法以巧妙地尝试启动。但是，无论如何，当您滚动时都会处理此问题，因此只需将其删除即可。

【讨论】：

【解决方案5】：

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

<!DOCTYPE html>

【讨论】：

疯了，这把我逼疯了。谢谢！

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

希望对某人有所帮助！

干杯！

【讨论】：

【解决方案7】：

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

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

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

【讨论】：

将 maximum-scale=1 添加到元视口解决了我的问题。

【解决方案8】：

我发现这个问题正在寻找我的问题的解决方案。 Scrollspy 工作正常，直到它到达最后 4 个部分。当它发生时，它立即跳到最后一段，避开了途中的其他 3 人。这是由于这些部分的尺寸相对较小。感谢 Jon 的回答，我决定调查 scrollspy 脚本，发现以下几行：

if (scrollTop >= maxScroll) {
    return activeTarget != (i = targets.last()[0])
    && this.activate ( i )
}

如果到达页面末尾，他们有责任选择最后一个部分。在像我这样的情况下评论它们可能会有所帮助（一次跳 3 个部分），但如果它太小，它会阻止到达最后一个部分。

【讨论】：