问题标签 [scrollspy]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
2 回答
4936 浏览

twitter-bootstrap - Bootstrap Scrollspy not Adding Active to my LI

I am encountering an issue with Scrollspy. I am able to get the links to point to the correct section, but it is not applying an active class to the currently "selected" li element. You can see the issue on my beta website at: http://beta.joshuabock.com/resume.html. I have looked around for a solution but so far no luck. Any suggestions on how to resolve this issue?

The basic code structure is as follows:

0 投票
2 回答
4122 浏览

twitter-bootstrap - twitter bootstrap 词缀/scrollspy 宽度和滚动问题

我几乎已经完成了所有工作: http: //firestream.net/2013/index.php?go=stats

这是我遇到的两个问题:

1)当您向下滚动时,我希望侧导航列表停留在屏幕的最顶部,而不是当前停留的位置 2)当您向下滚动时,导航列表的宽度会挤压

任何帮助或建议都会很棒!

0 投票
1 回答
16038 浏览

twitter-bootstrap - Bootstrap Scrollspy 不工作

我正在尝试实现一个固定的侧面菜单,用活动类更新活动页面链接。我将滚动间谍 HTML5 元素放在正文上,但我遇到了问题。有人可以查看我的页面,看看他们是否可以确定问题所在吗?

http://mattaltepeter.com/new/about.shtml

0 投票
1 回答
323 浏览

jquery - 无法让 scrollspy 工作

我在让引导程序的滚动间谍工作时遇到一些问题。输出页面生成良好,没有任何 javascript 错误。

但是在滚动时,我无法让 CSS 类应用活动。

下面是我设置的 JSFiddle。

谢谢

http://jsfiddle.net/475sT/15/

0 投票
3 回答
7389 浏览

javascript - 引导水平滚动间谍?

我正在成功使用 Bootstrap 的 scrollspy,但我想在目标锚点水平级联的页面上使用它。我已经调整无济于事,无法使其正常工作。我也试过https://gist.github.com/marcoleong/1922743没有成功。

请在http://jsfiddle.net/AzSWV/2/上查看我的小提琴,它适用于调用$('body').scrollspy();

您最初可以看到垂直滚动间谍工作。取消注释 CSS 并更新 fiddle 以查看水平布局。

0 投票
2 回答
1257 浏览

javascript - 浮动图像搞砸了 Bootstrap Scrollspy

我已经使用引导程序设置了一个页面。(http://ethnoma.org/about.html)我有一个附加的侧边栏导航(效果很好)。我也在这个导航上使用 bootstrap scrollspy,并且导航中的所有链接都在同一页面内(使用 ancors)。一切正常(即使添加了平滑滚动插件)。在将所有内容添加到页面(我将其放在<head>.

然后我的客户要求我将图像添加到页面。我这样做是使用引导标记和 css 类,如下所示:

这使父“a”标签向右浮动(在这种情况下)并使 img 成为块元素。

问题是这些浮动图像使页面比原来更长。然而 Scrollspy 仍然在同一个地方切换活动链接。这会导致 scrollspy 激活页面下方比您当前位置更远的内容链接。

在计算 ancors 链接到的 ID 的位置时,我不知道如何强制 Scrollspy 考虑浮动图像。你们有谁知道我该如何解决这个问题。您可以在以下页面http://ethnoma.org/about.html中查看问题的实际效果

0 投票
1 回答
342 浏览

twitter-bootstrap - 更高的导航栏打破了引导程序中 scrollspy 的停靠位置

我想在不破坏 twitter bootstrap 中的固定停靠行为的情况下更改导航栏的高度。我在哪里可以调整这个设置?更改 nav 元素的 offset 属性似乎并不能解决问题。

这是在导航栏高度更改之前正确对接子导航的示例,如果向下滚动,您将看到导航栏对接:

http://www.pictorious.com/about

但是,一旦我使导航栏更高,子导航就会完全隐藏在下面,认为它的导航与以前的高度相同。

0 投票
1 回答
3836 浏览

twitter-bootstrap - 如何让 Twitter Bootstrap 的 Scrollspy 插件与 LazyLoad 一起使用

我有一长页的 Divs。有的有图片,有的有文字。我将Scrollspy附加到导航栏,当我向下滚动 Div 列表时它会突出显示。

因为有很多图像,所以我也安装了LazyLoad

我面临的挑战是,在带有图像的 Div 上,延迟加载似乎导致 scrollspy 无法正确读取 Div 的高度。这意味着在当前 div 完成滚动之前,scrollspy 会突出显示下一个 div 的导航。

这是我拥有的代码的简化版本:

...所以在上面的代码中,当用户仍在滚动包含图像的“二”时,导航栏中的“三”被突出显示。我相信我可能不得不对 Scrollspy 对 DOM 的“刷新”做一些事情,但不太清楚如何做到这一点,或者它是否能解决问题:

提前感谢您的帮助!

0 投票
1 回答
701 浏览

jquery - Scrollspy:可以在 JSfiddle 中工作,但不能在实际页面上工作?

我在使用 twitter bootstraps scrollspy 时遇到问题。我目前可以在http://jsfiddle.net/VLBMV/2/上让它工作(重新制作一个例子),这太棒了。但是,当我将其转换为任何类型的实际页面时。它只会使导航中的最后一个元素处于活动状态。

** 此处编辑是一个使用以下代码失败的实时示例: http ://reageek.ca/dev/test.html

这是我的代码(减去文档类型):

这也是我的 test.css 的内容,这里没什么好看的,只有灰色框

谁能解释为什么这会失败?在此先感谢您的时间。

0 投票
1 回答
4297 浏览

twitter-bootstrap - Bootstrap - Scrollspy 滚动跳过倒数第二部分

关于所选元素的滚动位置,我遇到了 Bootstrap ScrollSpy 的问题。问题出现在页面底部,我有两个相对较短的内容部分。当我直接选择项目部分或滚动到它时,将突出显示教育部分而不是项目部分。我将如何偏移/修复滚动位置以选择正确的部分?我之前曾尝试通过将锚点向上移动到上一部分来解决此问题,但收效甚微。我目前看到的唯一其他选择是重组我的内容。在我这样做之前,我想看看是否有其他解决方案,因为我在第二个项目中遇到了这个确切的问题。

该问题可以在这里查看:http: //beta.joshuabock.com/resume.html

每个部分的结构都相同:

提前致谢。