Javascript twitter引导Scrollspy突出显示最终元素_Javascript_Twitter Bootstrap

Javascript twitter引导Scrollspy突出显示最终元素

javascript twitter-bootstrap

Javascript twitter引导Scrollspy突出显示最终元素,javascript,twitter-bootstrap,Javascript,Twitter Bootstrap,我正在建立一个单页网站，顶部的导航栏链接到页面上的不同部分。我已经用as链接了它。这很有效。每个部分都在导航中高亮显示问题在于最后一节。因为它是一个很短的部分，不会填满整个页面，所以永远不会到达id=“contact”，因此导航元素不会突出显示我注意到，当您到达最后一个元素时，它会在到达id之前高亮显示，但是id与所有其他部分一样位于该部分的顶部我查看了自定义application.js文件，但没有看到任何与scrollspy行为相关的内容有人能解释一下吗？只需将数据偏移量属性增加到更大

我正在建立一个单页网站，顶部的导航栏链接到页面上的不同部分。我已经用as

链接了它。这很有效。每个部分都在导航中高亮显示

问题在于最后一节。因为它是一个很短的部分，不会填满整个页面，所以永远不会到达

id=“contact”

，因此导航元素不会突出显示

我注意到，当您到达最后一个元素时，它会在到达

id

之前高亮显示，但是

id

与所有其他部分一样位于该部分的顶部

我查看了自定义

application.js

文件，但没有看到任何与scrollspy行为相关的内容

有人能解释一下吗？

只需将

数据偏移量

属性增加到更大的值，如

，如下所示：

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

bootstrap演示工作正常，因为它还偏移了subnav的高度，以及data属性上给出的

50px

偏移量

我只是自己在寻找答案。当谈到最后一项时，bootstrap演示页面肯定与我的页面有所不同。我也查看了application.js，但什么也没看到。最后，我决定比较他们和我的scrollspy.js版本。他们使用的是v2.0.4，而我使用的是v2.0.2。我用新版本替换了我的版本，它才开始按预期工作

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

所以我猜他们在我下载bootstrap后就悄悄地在内部修复了它。你可能也已经明白了这一点，但希望它能帮助其他人寻找同样的答案。

我有一个解决办法。在twitter的scrollspy JS的第40行，您将看到：

this.process()

把它拿走。这运行了process方法，巧妙地尝试启动er。但这是在滚动时处理的，所以只需将其删除，就可以了。

在我的例子中，只有将可滚动数据容器设置为

元素时，它才起作用

我将平滑滚动脚本与之结合使用，效果非常好：

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

希望这对别人有帮助

干杯

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

如果您切换回jQuery 1.7.2（如on），那么它将再次工作，或者您可以设置正确的DOCTYPE

下面是关于“notabug”问题的更多信息：

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

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

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

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

<!DOCTYPE html>

我发现这个问题是为了解决我的问题。Scrollspy工作正常，直到它到达最后4个部分。当它发生时，它立即跳到了最后一段，在路上避开了另外3段。这是由于这些截面尺寸相对较小造成的。多亏了Jon的回答，我决定调查scrollspy脚本，并发现以下几行：

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

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

感谢您的回答-我相信有一些更大的力量在起作用，而不仅仅是数据偏移。twitter示例的最后一部分的行为显然有所不同。另外，在我的示例中，如果有较小的部分（示例已更新），则增加偏移量会导致问题。@deadlyhifi您的演示对我来说效果很好，我还将其导出到JSFIDLE，并且在数据偏移量为500的情况下，它在那里也很好地工作，感谢您对此进行了研究-演示不太正确。如果你的浏览器是全宽的，点击“Cheesehead”，它会带你到那个部分，但突出显示的元素是“Contact”。在twitter的例子中，最后一部分的行为与其他部分完全不同。嗨，Jon，不，我还没弄明白。我只是在做实验，结果失败了。你已经得到了答案，所以谢谢你指出，我期待着在将来的项目中使用它。谢谢你，这解决了我的问题。。。不知道我是怎么把doctype忘了doh！添加一个而不是旧的帮助了我！向元视口添加最大比例=1修复了我的问题。疯狂的是，这让我发疯。谢谢