32

我在这个小提琴中重新创建了 scrollspy 的问题：http: //jsfiddle.net/jNXvG/3/

从演示中可以看出，无论滚动位置如何，ScrollSpy 插件始终保持最后一个菜单项被选中。我已经阅读了其他问题和答案，并尝试了offset等的不同组合，但没有一个有帮助。我不知道出了什么问题。

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

下一步是删除固定的内容高度并在侧边栏上使用“附加”。

4

14 回答 14

36

我遇到了完全相同的问题，对我来说，添加 height: 100%到 body 元素是解决方法。

（严格来说，似乎没有其他东西可以使它起作用）

于 2013-04-08T23:43:41.400 回答
35

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

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

JSFiddle

于 2012-08-25T20:11:15.927 回答
15

仅供参考：为了获得我想要的效果（与 Twitter Bootstrap 文档页面上的效果相同），我需要将“body”设置为我的目标元素......我无法通过使用我的元素的直接父元素来让滚动监视工作想以间谍为目标。

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

于 2012-11-20T22:13:02.263 回答
7

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

height:100%;

在导致问题的身体上（因为我没有类似的东西）。

那是个

position:absolute;

在容器 div 上。

希望它可以帮助那里的人...

于 2012-12-05T17:17:18.643 回答
7

我使用身高 100% 修复了它，但它在 Firefox 上不起作用。在浪费了这么多时间之后，在 github 页面上找到了答案。将高度 100% 应用于 HTML 标记修复了 Chrome 和 Firefox 的问题。

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

于 2015-03-05T14:47:23.923 回答
6

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

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

上面的 JavaScript 等价于：

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

唯一不指定 body 标记的情况是，如果您想使用上面的 JSFiddle中的嵌套滚动条跟踪元素。

于 2013-09-10T16:43:17.780 回答
5

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

于 2016-11-07T22:59:49.020 回答
4

我有同样的问题；height: 100%从<body>元素中删除 为我解决了这个问题。

于 2012-11-15T07:40:46.323 回答
2

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:

, $element = $(element).is('body') ? $(window) : $(element)

to this:

, $element = $(element).is('body') ? $(window) : $(window) //$(element)

(note that the element after the // is a comment so I don't forget I changed it)

And that fixed it for me.

于 2013-04-09T19:24:58.620 回答
1

ScrollSpy 非常无情，至少可以说文档很少……根据您的实现，对此有不同且相互冲突的修复……

嵌套内容是我的问题。这为我修复了它：

(1) 确保您的导航中的所有 href 与您监视的目标容器中的相应 ID 匹配。

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

都好！

我的猜测是，如果您查看 scrollspy 代码，它不会越过间谍容器的第一个孩子的 id。

于 2014-04-23T14:49:59.120 回答
0

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

我也遇到了同样的问题，当我单步执行代码时，我可以看到所有目标的偏移量都是相同的（-95px）。我检查了这些设置的位置，它正在使用 position() 函数。这将返回元素相对于父元素偏移量的位置。

我将其更改为使用 offset() 函数。此函数返回元素相对于页面偏移量的位置。一旦我这样做了，它就会完美地工作。不知道为什么这不是默认行为。

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

于 2013-06-10T09:08:04.923 回答
0

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

于 2013-01-09T19:23:07.493 回答
0

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

所有你需要的是：

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

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

它帮助到我。

于 2021-02-23T09:24:45.270 回答
0

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

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

希望这对将来的某人有所帮助。

于 2016-12-14T21:46:53.267 回答