如何使用 Bootstrap 滚动间谍?
[英] How to use Bootstrap scroll spy?
本文介绍了如何使用 Bootstrap 滚动间谍?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法让滚动间谍与垂直导航正常工作.您可以在下面找到我使用的代码.出于某种原因，只有两个"处于活动状态.
有人知道哪里出了问题吗?
<头><meta charset="utf-8"><title>Twitter Bootstrap Scroll Spy Playground</title><link href="bootstrap/css/bootstrap.css" rel="样式表"><身体><div class="容器"><div class="row"><div class="span3"><ul class="navbar nav nav-list 词缀"><li class="active"><a href="#one">One</a></li><li><a href="#two">Two</a></li>
<div class="span1" data-spy="scroll"><section id="one"><h1>一个</h1><h2>广告紧身裤 keytar，早午餐 id 艺术派对 dolor Labore.Pitchfork yr enim lo-fi 在他们售罄 qui 之前.Tumblr 从农场到餐桌的自行车权利.</节><section id="两个"><h1>两个</h1><h2>Anim keffiyeh carles 开衫.Velit seitan mcsweeney 的 Photo Booth 3 wolf Moon irure.Nihil 纹身 accusamus，具有讽刺意味的生物柴油 keffiyeh 工匠 ullamco consequat.</h2></节>
<script src="http://code.jquery.com/jquery-latest.js"></script><script src="bootstrap/js/bootstrap.js"></script></html>
解决方案
在为自己解决这个问题时，我发现被监视的元素需要有一个滚动条.>
看看这个 Fiddle:http://jsfiddle.net/adamp/qgU6h/1/
您可以直接监视 body 元素 ($('body').scrollspy()) 或为您的内容指定一个明确的高度并强制它显示滚动条.
(如果您查看 Bootstrap 文档示例，它会执行固定的-高度技巧.)
I cannot quite get the scroll spy to work properly with a vertical nav. Below you can find the code I use. For some reason, only "Two" gets active.
Anyone has an idea as of what is wrong?
<html lang="en">
<head>
<meta charset="utf-8">
<title>Twitter Bootstrap Scroll Spy Playground</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span3">
<ul class="navbar nav nav-list affix">
<li class="active"><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
</ul>
</div>
<div class="span1" data-spy="scroll">
<section id="one">
<h1>One</h1>
<h2>Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. </h2>
</section>
<section id="two">
<h1>Two</h1>
<h2>Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.</h2>
</section>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</body>
</html>
解决方案
In sorting this out for myself, I've found that the element being spied upon needs to have a scroll bar.
Take a look at this Fiddle: http://jsfiddle.net/adamp/qgU6h/1/
You can either spy directly on the body element ($('body').scrollspy()) or give your content an explicit height and force it to show a scrollbar.
(If you look at the Bootstrap documentation example, it does the fixed-height trick.)
这篇关于如何使用 Bootstrap 滚动间谍?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
