Question

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

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

我不想编辑我的模板以包含丑陋的html'数据'标记，因此我通过JavaScript调用scrollspy()来激活插件。

下一步是删除固定内容高度，并使用侧边栏上的'affix'。

Answer 1

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

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

JSFiddle

Answer 2

我遇到了完全相同的问题，对我来说，将 height: 100%添加到body元素是修复。

（严格来说似乎没有任何其他方法可以使它发挥作用）

Answer 3

仅供参考：为了获得我想要的效果（与Twitter Bootstrap文档页面上的相同），我需要将'body'设置为我的目标元素...我无法通过使用直接的父元素来实现卷轴工作我想要窥探的元素作为目标。

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

Answer 4

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

height:100%;

导致问题的身体（因为我没有这样的事情）。

这是一个

position:absolute;

在容器div上。

希望有人帮助那些人......

Answer 5

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

https://github.com/twbs/bootstrap/issues/5007

Answer 6

我有同样的问题;从height: 100%元素中移除<body>为我修复此问题。

Answer 7

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

Answer 8

我有一个类似的问题，滚动间谍除了身体标签之外什么都不起作用所以我实际上进入了引导程序js找到Scroll间谍（SCROLLSPY CLASS DEFINITION）部分并更改了这一行：

，$ element = $（元素）.is（＆＃39; body＆＃39;）？ $（窗口）：$（元素）

到此：

，$ element = $（元素）.is（＆＃39; body＆＃39;）？ $（窗口）：$（窗口）// $（元素）

（请注意//之后的元素是评论，所以我不会忘记我改了它）

这为我解决了。

Answer 9

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

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

上面的JavaScript相当于：

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

唯一没有指定body标签的情况是，如果要跟踪JSFiddle above中嵌套滚动条的元素。

Answer 10

ScrollSpy是非常无情的，文档很少，至少可以说......根据你的实现有不同的和相互矛盾的修复......

嵌套内容是我的问题。这为我解决了这个问题：

（1）确保导航中的所有href都与目标容器中的间谍相匹配。

（2）如果您监视内容容器中的项目是嵌套的，那么它将无效...

这：

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

至此：

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

一切都好！

我的猜测是，如果你看一下它不会超过ids容器的第一个孩子的卷轴代码。

Answer 11

确保您没有混合实施。如果你的身体标签上有$('#content).scrollspy()，则不需要data-spy="scroll" data-target=".bs-docs-sidebar"。

Answer 12

我认为这可能是ScrollSpy中的一个错误。

我也有同样的问题，当我逐步完成代码时，我可以看到所有目标的偏移量是相同的（-95px）。我检查了这些设置的位置，并使用了position（）函数。这将返回元素相对于父元素偏移量的位置。

我将其更改为使用offset（）函数。此函数返回元素相对于页面偏移量的位置。一旦我这样做了，那就完美了。不确定为什么这不是默认行为。

我的情况下position（）函数不起作用的原因是因为我必须有一个空div，它实际上绝对位于其容器顶部95px之上。我需要这个作为我的目标，以便标题不会隐藏在固定在页面顶部的标题后面。

Answer 13

当我试图找出这个问题时，我使用了Mehdi Benadda所说的一些内容并将position: relative;添加到body。我将其添加到样式表中：

body {
  position: relative;
  height: 100%;
}

希望这有助于将来。

Answer 14

您不必调用方法 scrollspy()。此外，您不需要在任何地方设置高度：100%。

您只需要：

位置：相对；对于身体
将 data-bs-spy="scroll" 添加到您的内容或正文
添加带有导航栏 ID 的 data-bs-target

https://i.imgur.com/M5jib0t.png

这对我有帮助。

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

14 个答案:

JSFiddle