问题标签 [scrollspy]

为什么我的滚动间谍不起作用？

http://jsfiddle.net/NnREW/

我最近一直在玩 Bootstrap，我目前正在为我的网站创建一个新模板。我在这个问题上做了很多搜索，但我发现的大部分内容都是针对那些根本无法scrollspy上班的人。

我想做的是创建一个侧面导航，它为字母表的每个字母都有一个单独的目标。您单击一个链接可将您带到内容面板的该部分。内容面板将是一个按字母顺序排列的列表。手动滚动页面应该会自动将导航栏中的链接设置为active，从而突出显示字母（或者我决定通过 CSS 对它们执行的任何操作）。

对于那些熟悉 iPhone 的人来说，这很像他们在查看Contacts应用程序等有组织的列表时所实现的。假设视口显示了几个按字母顺序排列的名称，从D视口的顶部开始H，到底部。

使用scrollspy，仅突出显示最近的目标。下面的例子说明了我的意思。

示例：http: //jsfiddle.net/panchroma/ExWDq/embedded/result/

我希望我已经足够具体，让您了解我想要做什么。如果我在任何地方失去了你，请告诉我，我会尝试更好地重新解释。

是scrollspy用来完成这项任务的工具吗？

如果我知道一种方法来检查一个元素是否在屏幕上可见，我也许可以利用它在 Javascript 中制作一些可以完成我需要的一切的东西，但我希望能够使用scrollspy它。

谢谢阅读。:)

首先，这就是我通常加载评论的方式。

HTML标记：

以及JavaScript代码（custom.js）：

现在，进入正题...

我想加载评论，只有当用户向下滚动到评论部分时，即div#comments。

虽然不是为此目的，但有人告诉我Twitter Bootstrap 的 Scrollspy 插件可用于执行此操作。

但我不确定如何。

（我已阅读文档并尝试了各种标记，但无法使其正常工作；并决定从头开始。）

这是要测试的评论的骨架：http: //jsfiddle.net/MvTgk/（及其各自的演示）

PS：如果您没有时间写一个完整的答案，请在评论中留下任何提示/建议。我很乐意亲自尝试。

I am having an issue with Bootstrap ScrollSpy in regards to the scrolling position of a selected element. The issue occurs at the bottom of the page, I have multiple relatively short sections of content through out the page. They are collapsed and expand onClick, (so yes, if I choose to have all open then there seem to be no problem) and when I reach the bottom of page before all have been selected by scrollspy it jumps to the last element on nav.

It seems to be a issue with no more scrollable area. (Also adding extra white space padding to kill design is not an option)

I have added scrollspy to body, my body has no height values added, offset has no effect other then starting the highlighted element was to early.

Here is a JSFiddle of my code: http://jsfiddle.net/Abuu/sAUee/

I have only found one similar question here on So, but it has not been answered: Bootstrap - Scrollspy scrolling skipping second to last section

Thanks in advance.

我正在尝试将引导程序 ScrollSpy 应用于我的词缀导航栏。我缺少一些东西，因为我认为我做的一切都是正确的。

这是我的代码：

我的链接和我的词缀工作正常，但我看不到滚动间谍。

在此处查看改编的jsfiddle。

嗨，我正在尝试让滚动间谍在我的导航中工作，但它不是这里的链接到我的网站： http: //www.saracook.coffecup.com

这是我实现它的方式：

我遵循了这个答案并举了一个例子：

如何以正确的方式在 angular.js 中实现 scrollspy？

我的目的是使用模板填充动态内容，其中有图像：

http://plnkr.co/edit/OKrzSr

**HTML 代码差异:((

Javascript代码区别：

该scrollspy功能似乎无法按预期工作。当我向下滚动时，它太早地激活了菜单。我认为它将图像仅视为一行文本。我不确定。

有什么帮助解决这个问题吗？

很抱歉，我为你写了一个请求，但我无法修复我的页面。我阅读了几篇关于 ScrollSpy 的 Howto、Stack Overflow 和博客文章，但我无法解决我的问题。谁能帮我？

我知道，最好的方法是将页面复制粘贴到代码共享站点中，但是这个问题取决于整个环境。对不起！我希望！页面：http ://eskuvonk.dras.hu/

我有一个带有固定覆盖（标题）的页面，我想使用主滚动条进行滚动。问题来了：在 Chrome 下，整个页面运行良好，但在 Firefox 下，菜单很疯狂！在第一次滚动时突出显示好的菜单，但在跳转后立即显示最后一个。为什么？我检查了调试器中的 div、填充和其他内容太远，无法指示页面的结尾。

请帮我！我的婚礼取决于它... :)

谢谢！

当使用绝对 url 而不是 # 锚链接时，我试图让 scrollspy 工作。

例如，我可以通过仅使用轻松运行 scrollspy<a href="#section1"></a>

我希望能够通过使用运行 scrollspy<a href="http://myurl.com/#section1"></a>

这样做的原因，是主页上的主导航是scorllspy，但是博客不是主页的一部分。当访问博客然后单击主页上的某个链接时，您会被路由到http://myurl.com/blog/#section1而不是主页 ID。

我找到了这个解决方案（使用 url 和 hash with bootstrap scrollspy），但无法让它完全发挥作用。经过一些调整和一系列正则表达式组合后，我可以让它将活动类添加到第一个菜单项，但它不会刷新。

关于让它发挥作用的任何想法？有没有我应该使用的替代 js 库？

感谢特洛伊的解决方案

我添加$('body').scrollspy({ target: '.nav-main', offset: 155 })是为了在刷新 scrollspy 后重新应用数据偏移量。经过反复试验，这是我能找到的唯一解决方案。

我正在尝试让 Bootstraps ScrollSpy 或任何“滚动间谍”类型的脚本在名为#reportContainer.

我的标签中有两个链接，因为一个是删除页面的删除按钮。与课程的链接.page是我希望它看到的。

谁能帮我搞定这个工作？

导航

目标