问题标签 [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 回答
28251 浏览

twitter-bootstrap - 使 ScrollSpy 引导侧边栏像示例一样的最少代码是多少?

我在引导页面上看到了左侧的 ScrollSpy 示例:

http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy

但是他们没有任何示例代码来说明如何获得相同的样式和效果?实现这一点所需的最少代码是多少,因为我见过的所有 JsFiddle 示例都没有样式。

更新

我已停止在我的项目中使用 scrollspy,因为滚动条仅在页面级别有效,并且我需要滚动条仅出现在发生滚动的容器上

0 投票
6 回答
51222 浏览

jquery - 固定导航栏上的 Bootstrap scrollspy 偏移不起作用

我在这里创建并准确解决了我的问题以进行测试:http: //jsfiddle.net/aVBUy/7/

问题是,当我单击导航栏项目时,我有一个滚动到元素 ID 的脚本。当页面处于正确位置时,我正在使用 scrollspy 突出显示导航元素。但是,滚动间谍仅在到达浏览器/设备顶部时才更改活动状态。因为我的导航栏是固定的,所以我需要将偏移量应用于 scrollspy 以偏移 51px(导航栏高度)。

我已经尝试了一切,但我无法让它工作。请检查我的小提琴,看看你是否能找到我出错的地方,这对我有很大帮助。

这是我最小化的代码...

HTML

CSS

脚本

小提琴

http://jsfiddle.net/aVBUy/7/

0 投票
2 回答
5669 浏览

javascript - 使用 twitter 引导滚动间谍

我一直在尝试让滚动间谍在我的引导站点上工作,但我无法让它工作。我遇到的问题是,无论我滚动到哪里,滚动都没有效果。你可以看到我在这里做什么。

我已经执行了所有需要的步骤,即下面是正文标签

导航也在那里:

也调用了scrollspy。

任何人都可以看看,请指出我在这里忽略或做错了什么。

0 投票
0 回答
135 浏览

twitter-bootstrap - 包含图像时,Bootstrap scrollpy 会在刷新时中断

我在我在 CMS 系统中构建的网站中使用 bootstrap scrollspy,当我刷新我的一个页面时,它当前不会同步。它在没有任何图像的不同页面中完美运行,但在具有大量图像的页面上它会中断。当位于 CMS 系统之外时,它也不起作用。由于 CMS 系统,我必须使用数据属性来调用 scrollspy。

我尝试了许多不同的方法,例如更改 css 和重新组织页面,但对于有图像的页面来说,总是同样的问题。关于可能导致问题的任何想法?

0 投票
2 回答
3921 浏览

javascript - $.fn 不是对象

我正在尝试将 scrollspy 与 bootstrap 一起使用,但遇到了一些错误。错误控制台不断返回:TypeError: 'undefined' is not an object (evaluating '$.fn'),在 bootstrap-scrollspy.js 的第 124 行,即这一行

,位于 ScrollSpy 插件定义下。我正在使用直接取自这个 jsFiddle的代码

有谁知道为什么会这样?

0 投票
1 回答
1550 浏览

twitter-bootstrap - bootstrap:使用 scrollspy 时如何设计导航栏?

我已经使用 bootstrap 启动了一个单页项目,但我在使用 scrollspy 时遇到了一些问题,因为我需要使用类 nav 来改变我的导航栏样式(我的样式)。
谁能建议如何在没有导航类的情况下使 scrollspy 工作,或者在不更改 bootstrap.min.css 的情况下删除初始导航类属性的方法?

这是代码:

谢谢。

0 投票
9 回答
11883 浏览

html - 如何更改引导滚动间谍活动链接颜色

我正在使用带有 bootstraps nav-pills navbar 的 scrollspy,并且似乎无法更改活动链接的颜色或悬停颜色。我一直在尝试各种组合,但似乎仍然无法弄清楚为什么我不能改变颜色。任何想法为什么?

CSS

导航

0 投票
0 回答
235 浏览

javascript - 滚动间谍卡在顶部,不跟随滚动

我正在从http://getbootstrap.com/components复制完全相同的代码和资源

但是,我不明白为什么只有在我的副本中,每当我刷新页面时,整个 ul 列表都会卡在它的位置,因此,如果我向下滚动,ul 就会离开屏幕。

这是我的版本:

卷轴间谍卡住了

如果我不刷新,则 ul 会正常工作,并在我滚动突出显示子菜单的任何地方跟随...设置active类的 JQuery 似乎正在工作,因为带有active类的子菜单是正确的。我完全不知道这怎么会发生......任何帮助将不胜感激!谢谢!

笔记:

  • -。它适用于原始网站
  • -。它适用于铬
  • -。Bootstrap 2.3.2 版本工作正常
0 投票
3 回答
16759 浏览

twitter-bootstrap - Bootstrap 3.0 scrollspy 响应式偏移

我试图让 Bootstrap 的 scrollspy 在响应式站点上可靠地工作,在该站点上,顶部导航栏的高度根据媒体/浏览器的宽度而变化。因此,我不是硬编码属性上的偏移量,data-offset而是通过 Javascript 初始化动态设置它,如下所示:

对于宽布局(即 Bootstrap -lg),它可以正常工作,但对于较窄的布局,似乎存在“累积”偏移。换句话说,它在第一部分工作得很好,但随后需要增加像素来激活后面的部分(例如,下一个部分为 90 像素,第三部分为 110 像素,等等)。

我尝试按此答案中所述直接操作 scrollspy 对象: 如何在 Bootstrap 中设置 ScrollSpy 的偏移量?但无济于事。

有人可以推荐一种在响应式站点中实现 scrollspy 的规范方法,其中偏移量根据媒体宽度而变化?

附加信息:

data-我刚刚分析了这两种情况下的 scrollspy 对象,结果发现仅通过属性与通过 JS初始化时偏移列表是不同的。似乎当我通过 JS 初始化它时,偏移数组在一些 BS 响应调整发生之前填充,因此高度不同。在所有响应的东西都运行,我如何触发 scrollspy 的初始化?BS 调整布局后是否有挂钩/回调?是否涉及到 JS,或者所有响应式的东西都由 CSS 处理?

0 投票
1 回答
2696 浏览

html - Bootstrap 3 Scrollspy 激活事件未触发

我正在尝试使用带有 Scrollspy 的 Bootstrap 3 RC1 创建一个站点。我的网页现在非常简单,基本上是这样设置的:

我通过调用初始化了 Scrollspy,$("section").scrollspy()并设置了一个事件处理程序,如下所示:

我的问题是这个activate事件永远不会被触发。有谁知道为什么它不工作?我注意到所有教程都使用导航栏来突出显示当前部分,但我真的不想要导航栏。