5

我有一个使用带有 scrollspy 和固定标题的 Bootstrap 的站点。我让它工作正常，但遇到了 scrollspy 的问题。页面上有几个部分不是主导航的一部分。当您在这些部分中时，最新的“活动”链接仍然存在。最容易在小提琴中证明这个问题：

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...

基本上，我只希望在导航栏中的目标元素实际显示时显示活动状态。有任何想法吗？提前致谢！

4

1 回答 1

2

同样的事情发生在我身上，这就是我所做的。
我不知道这是否是最好的方法，但它确实有效。
这是您小提琴中的代码：http: //jsfiddle.net/ZGsPm/1/

您在忽略的部分所在的位置添加额外的列表项，并为它们添加一个类（示例中为“忽略”）和一个 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 中（在调用 scrollspy 函数之后）：

$('.ignore').css({'visibility':'hidden', 'width':'0%'});

希望这可以帮助！

于 2014-07-31T05:34:07.417 回答