Javascript Twitter Bootstrap scrollspy 总是选择最后一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12095579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap scrollspy always selecting last element
提问by koichirose
I have an issue with scrollspy, recreated in this fiddle: http://jsfiddle.net/jNXvG/3/
我有一个关于 scrollspy 的问题，在这个小提琴中重新创建：http: //jsfiddle.net/jNXvG/3/
As seen in the demo, the ScrollSpy plugin always keeps the last menu item selected no matter the scrolling position. I've read other questions and answers and tried different combinations of offset, etc., but none of them have helped. I can't figure out what's wrong.
如演示中所示，无论滚动位置如何，ScrollSpy 插件始终保持最后一个菜单项被选中。我已经阅读了其他问题和答案，并尝试了 等的不同组合offset，但没有一个有帮助。我无法弄清楚出了什么问题。
I don't want to edit my template to include ugly html 'data' tags, so I am calling scrollspy()via JavaScript to activate the plugin.
我不想编辑我的模板以包含丑陋的 html 'data' 标签，所以我scrollspy()通过 JavaScript调用来激活插件。
The next step would be to remove the fixed content height and use 'affix'on the sidebar.
下一步是删除固定的内容高度并在侧边栏上使用“词缀”。
回答by merv
回答by Mehdi Benadda
I had the exact same problem and for me, addingheight: 100%to the body element was the fix.
我遇到了完全相同的问题，对我来说，添加height: 100%到 body 元素是解决方案。
(stricly nothing else seemed to make it work)
（严格来说似乎没有其他方法可以使它起作用）
回答by Andrew
FYI: To get my desired effect (same one as on the Twitter Bootstrap docs page) I needed to set 'body' as my target element...I could not get scrollspy'ing to work by using the immediate parent of the elements I wanted to spy as the target.
仅供参考：为了获得我想要的效果（与 Twitter Bootstrap 文档页面上的效果相同），我需要将“body”设置为我的目标元素......我无法通过使用元素的直接父元素来进行滚动监视想以间谍为目标。
(It just auto-selected the my last element always)
（它总是自动选择我的最后一个元素）
回答by gsaslis
In my case, Firefox was always selecting the last element and it was NOT the
就我而言，Firefox 总是选择最后一个元素，而不是
height:100%;
on the body that was causing the problem (as I didn't have anything like that).
在导致问题的身体上（因为我没有类似的东西）。
It was a
那是个
position:absolute;
on a container div.
在容器 div 上。
Hope it helps someone out there...
希望它可以帮助那里的人...
回答by Atif
I fixed it using body height 100% but it didnt work on Firefox. After wasting so much time found the answer on github page. Applying height 100% to HTML tag fixes the issue both for Chrome and Firefox.
我使用体高 100% 修复了它，但它在 Firefox 上不起作用。浪费了这么多时间在github页面上找到了答案。将高度 100% 应用于 HTML 标记修复了 Chrome 和 Firefox 的问题。
回答by Charlie Haviland
If anyone else's issue wasn't solved by the suggestions above try adding <!DOCTYPE html>to the first line of your page. This was a simple step which solved the problem for me.
如果上面的建议没有解决其他人的问题，请尝试添加<!DOCTYPE html>到页面的第一行。这是一个简单的步骤，为我解决了问题。
回答by Baris Wanschers
I had this same problem; removing the height: 100%from the <body>element fixed this for me.
我有同样的问题；height: 100%从<body>元素中删除为我解决了这个问题。
回答by James Lawruk
When calling the scrollspy method you typically specify the body tag and the nav element.
调用 scrollspy 方法时，您通常指定 body 标签和 nav 元素。
<script>
$(function() {
$('body').scrollspy({ target: '#faq_sidebar' });
});
</script>
The JavaScript above is equivalent to:
上面的 JavaScript 等效于：
<body data-spy="scroll" data-target="#faq_sidebar">
The only situation where you do not specify the body tag is if you want to track an element with a nested scrollbar like in the JSFiddle above.
回答by David Acevedo
I had a similar issue where scroll spy would not work on anything but a body tag so I actually went into the bootstrap js found the Scroll spy (SCROLLSPY CLASS DEFINITION) section and changed this line:
我有一个类似的问题，其中滚动间谍除了正文标签之外不能用于任何其他内容，所以我实际上进入了引导 js 找到了滚动间谍（滚动间谍（SCROLLSPY CLASS DEFINITION））部分并更改了这一行：
, $element = $(element).is('body') ? $(window) : $(element)
, $element = $(element).is('body') ? $(窗口) : $(元素)
to this:
对此：
, $element = $(element).is('body') ? $(window) : $(window) //$(element)
, $element = $(element).is('body') ? $(window) : $(window) //$(元素)
(note that the element after the // is a comment so I don't forget I changed it)
（注意 // 后面的元素是注释，所以我不会忘记我改变了它）
And that fixed it for me.
这为我修复了它。
回答by AgonyOfVictory
ScrollSpy is pretty unforgiving and the documentation is sparse to say the least...there are different and conflicting fixes for this based on your implementation...
ScrollSpy 非常无情，而且文档至少可以说是稀疏的……根据您的实现，对此有不同且相互冲突的修复……
Nested content was my problem. This fixed it for me:
嵌套内容是我的问题。这为我修复了它：
(1) make sure all hrefs in your nav match a corresponding ID in your spied upon target container.
(1) 确保导航中的所有 href 与您监视的目标容器中的相应 ID 匹配。
(2) If the items in your spied upon content container are nested then it won't work...
(2) 如果您监视的内容容器中的项目是嵌套的，那么它将不起作用...
This:
这个：
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- nested content -->
<div id="navItem1">
<div id="navItem2"></div>
</div>
</div>
To This:
对此：
<ul class="nav" id="sidebar">
<li>
<a href="#navItem1" />
</li>
<li>
<a href="#navItem2" />
</li>
</ul>
<div id="spiedContent"> <!-- flat content -->
<div id="navItem1"></div>
<div id="navItem2"></div>
</div>
All good!
都好！
My guess if you looked at the scrollspy code its not looking past the first child of the spied container for the ids.
我的猜测是，如果您查看了 scrollspy 代码，它不会查看 id 的被监视容器的第一个子项。
