Twitter Bootstrap scrollspy总是选择最后一个元素

Question

我有一个卷轴问题,在这个小提琴中重新创建:http: //jsfiddle.net/jNXvG/3/

如演示所示,无论滚动位置如何,ScrollSpy插件始终会保留最后一个菜单项.我已经阅读了其他问题和答案,尝试了不同的组合offset等,但没有一个有帮助.我无法弄清楚出了什么问题.

我不想编辑我的模板以包含丑陋的html'数据'标签,所以我scrollspy()通过JavaScript 调用来激活插件.

下一步是删除固定内容高度并使用侧栏上的"附加".

Answer 1

您需要将ScrollSpy附加到要触发滚动事件的元素,而不是将反映滚动位置的菜单:

$('#content').scrollspy();?

Answer 2

我有完全相同的问题,对我来说,添加 height: 100%到body元素是修复.

(严格来说似乎没有其他任何东西可以使它工作)

Answer 3

仅供参考:为了获得我想要的效果(与Twitter Bootstrap文档页面相同)我需要将'body'设置为我的目标元素...我无法通过使用元素的直接父元素来进行工作想要间谍作为目标.

(它只是自动选择了我的最后一个元素)

Answer 4

就我而言,Firefox总是选择最后一个元素而不是

height:100%;

导致问题的身体(因为我没有这样的东西).

那是个

position:absolute;

在容器div上.

希望它可以帮助那里的人......

Answer 5

调用scrollspy方法时，您通常会指定body标签和nav元素。

<script>
        $(function() {
            $('body').scrollspy({ target: '#faq_sidebar' });
        });
</script>

上面的 JavaScript 相当于：

<body data-spy="scroll" data-target="#faq_sidebar">

唯一不指定 body 标记的情况是，如果您想要跟踪带有嵌套滚动条的元素（如上面的 JSFiddle中所示）。

Answer 6

我使用100%的身高修复它但它在Firefox上没有用.浪费了这么多时间在github页面上找到了答案.将高度100%应用于HTML标记可以解决Chrome和Firefox的问题.

Answer 7

如果上面的建议没有解决其他人的问题，请尝试添加<!DOCTYPE html>到页面的第一行。这是一个简单的步骤，为我解决了问题。