问题标签 [scrollspy]

我正在尝试在我正在开发的网站上实现 Bootstrap Scrollspy，但无论我做什么，我似乎都无法让它工作（或为此做任何事情）。

该网站可以在http://thecreativecompany.stage.webcomm.com.au/查看

这是我的 JavaScript：

我已经让 scrollspy 工作得非常完美，但是它会跳过在其 id 中包含加号 (+) 的项目，以及词缀。除了修剪id之外，这里有什么解决方法吗？出于 SEO 的原因，我更喜欢 id 中的 + 符号，并且 id 是动态生成的并在其他代码中重用，所以我更喜欢以这种方式保留它们。

我正在将 Bootstrap 3 用于我正在构建的单页网站。我有一些我似乎无法克服的问题。

链接到页面

卷轴间谍：

第一个问题是关于 Scrollspy。我已经实现了这一点，但我想在向上滚动经过最顶部的锚点时取消绑定 scrollspy。目前导航中有三个项目，最上面的一个是“工作”。在网站上向上滚动超出此区域时，我想取消绑定“间谍”。我想出了一个想法，在导航中添加一个额外的项目（使用等效的锚点），然后将其定位在页面之外，但这感觉有点脏！

手机上的折叠菜单：

我遇到的另外两个问题与移动设备上的折叠菜单有关（在 iPhone 4 上测试）。

第一个很简单，当导航打开时，然后点击菜单切换（再次关闭它）折叠的菜单会奇怪地闪烁，它不仅仅是动画回来（就像在网络上那样）。

第二个问题是我希望在点击其中一个菜单项时导航消失。我目前正在使用以下代码，但它似乎会导致页面的一些疯狂滚动（再次在移动设备上）：

任何帮助是极大的赞赏！

This is for a single page, with a navbar that links to local anchors only.
The navbar comes after a header, but sticks to top when scrolling down.

You can see how it works on github pages

But I've got two offset problems with link/anchors:

• as long as you don't scroll, the anchors are offset and masked by the navbar.
• once the navbar is affixed, the following links work as intended but not the first one.

A body margin breaks the layout as it prevents the header from beginning right at the top:

I've tried without success to play with margin/padding for the sections:

Here are the html and css

• Any idea how to fix that?
• Can it be solved with pure css?
• Or do I need some js fix to account for the affix?

我刚刚使用 Twitter Bootstrap 完成了我的第一个响应式网站，它使用 scrollspy 上下滚动浏览网站的五个部分（主页等）。该站点在 Firefox 和 IE 中运行良好，但在 Chrome 和 Safari 中，下部的内容是水平扩展的，而不是像 Mozilla Firefox 和 IE 那样垂直扩展。

显然，我正在寻找一种方法来修复它，或者我缺少一些关于 twitter bootstrap 或 html5 本身的跨浏览器行为的细节。

我们在侧边栏 ul/il 列表上使用 twitter bootstrap scrollspy，效果很好。但是，在单击侧边栏中的链接时，我们也会使用平滑滚动。这会导致 scrollspy 突出显示进入视图的每个元素，就像在正常情况下一样。

但是，当通过单击侧导航中的链接触发滚动时，用户很可能不希望菜单在滚动发生时进行动画处理。有没有办法在动画滚动运行时暂时禁用滚动间谍，然后在滚动完成后重新启用它？

这是一个小提琴。

由于这个问题中描述的关于创建响应式导航菜单的问题，我需要有两个相同的导航元素，一个对小屏幕可见，另一个对大屏幕可见。

但是，我希望 scrollspy 同时跟踪和应用.active类。为简单起见，假设我们有两个相同的导航，如下所示：

然后是内容：

然后调用scrollspy：

您会在小提琴中看到活动类被搞砸了，并且在两个导航上来回闪烁。但是，如果您scrollspy从其中一个导航中删除该类，则另一个可以正常工作。这是可以修复的吗？

我正在使用 Bootstrap 3。我想在 Bootstrap 站点上的文档中重新创建与侧边栏相同的功能。

下面是我的代码，它也在这里：http ://bootply.com/82119

两个问题。

1. 当您向下滚动页面经过每个部分时，侧边栏项目不会突出显示。
2. 当您单击侧边栏项目时，它会跳转到相关的锚点，但一半的内容是不可见的。更改data-offset值似乎没有效果。

我究竟做错了什么？

我正在使用 Scrollspy 的 Jquery 独立实现。我在这里有一个关于我的问题的 jsfiddle 示例：http: //jsfiddle.net/2acyu/66/

当页面向下滚动浏览 3 个部分时，顶部导航链接会突出显示。

工作正常！

我的问题是我想要一些可以切换的隐藏元素。当显示一些额外的内容并且其中一个部分被展开时，它会抛出 scrollspy。尝试展开隐藏的文本，然后向下滚动。由于容器 div 的偏移值已更改，因此在此部分到达页面顶部之前，文本 2 的链接会突出显示。

scrollSpy 的 Bootstrap 版本有一个“刷新”方法，当添加/更改 DOM 中的元素以修复这种情况时，可以调用该方法。但是，我使用的独立 JQuery 版本的 Scrollspy 没有。

另一个网站上的某人建议使用：

然后重新创建小部件。

但我不确定如何实施此修复程序。

任何帮助表示赞赏。

我只是无法从 bootstrap 3 中获得 scrollspy 工作。我已经尝试了从无数论坛中阅读的所有内容，包括 stackoverflow 的答案，但没有成功。

因此，如果有人可以查看此代码并提供帮助，那就太好了。

这是代码：

提前致谢！！干杯!

编辑：您可以检查它在以下 URL 中不起作用：http: //zumuha.site40.net/bootstrap/examples/starter-template/

干杯!