erh*_*h86 5 jquery twitter-bootstrap scrollspy
我有一个使用带有scrollspy和固定标头的Bootstrap的站点.我有它工作正常,但滚动问题遇到了问题.页面上有几个部分不属于主导航.当您进入这些部分时,最新的"活动"链接仍然存在.最容易在小提琴中展示问题:
http://jsfiddle.net/eric1086/R7S9t/1/
<body data-spy="scroll" data-target=".main-nav">
<nav class="main-nav">
<ul class="nav">
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
<li><a href="#fourth">Fourth</a></li>
<li><a href="#fifth">Fifth</a></li>
</ul>
</nav>
<section class="no-spy">
Don't spy me!
</section>
<section class="block" id="first">
First
</section>
etc...
基本上我只希望当导航栏中的目标元素实际显示时显示活动状态.有任何想法吗？提前致谢!
我也遇到了同样的情况，这就是我所做的。
我不知道这是否是最好的方法，但它确实有效。
这是小提琴中的代码：
http://jsfiddle.net/ZGsPm/1/
您可以在忽略的部分所在的位置添加额外的列表项，并为它们添加一个类（示例中的“ignore”）和一个 id。
<body data-spy="scroll" data-target=".main-nav">
<nav class="main-nav">
<ul class="nav">
<li class="ignore"><a href="#no-spy-first"></a></li>
<li><a href="#first">First</a></li>
<li><a href="#second">Second</a></li>
<li><a href="#third">Third</a></li>
<li><a href="#fourth">Fourth</a></li>
<li><a href="#fifth">Fifth</a></li>
<li class="ignore"><a href="#no-spy-second"></a></li>
</ul>
</nav>
然后将相应的 id 添加到这些部分，以便您可以从列表项中引用它们。
<section class="no-spy" id="no-spy-first">
Don't spy me!
</section>
<section class="block" id="first">
First
</section>
...
<section class="no-spy last" id="no-spy-second">
Don't spy me!
</section>
最后，在 Javascript 中（在调用 rollspy 函数之后）：
$('.ignore').css({'visibility':'hidden', 'width':'0%'});
希望这可以帮助！
| 归档时间： |
|
| 查看次数： |
2794 次 |
| 最近记录： |