问题标签 [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.
twitter-bootstrap - 使 ScrollSpy 引导侧边栏像示例一样的最少代码是多少?
我在引导页面上看到了左侧的 ScrollSpy 示例:
http://twitter.github.io/bootstrap/2.3.2/javascript.html#scrollspy
但是他们没有任何示例代码来说明如何获得相同的样式和效果?实现这一点所需的最少代码是多少,因为我见过的所有 JsFiddle 示例都没有样式。
更新
我已停止在我的项目中使用 scrollspy,因为滚动条仅在页面级别有效,并且我需要滚动条仅出现在发生滚动的容器上
jquery - 固定导航栏上的 Bootstrap scrollspy 偏移不起作用
我在这里创建并准确解决了我的问题以进行测试:http: //jsfiddle.net/aVBUy/7/
问题是,当我单击导航栏项目时,我有一个滚动到元素 ID 的脚本。当页面处于正确位置时,我正在使用 scrollspy 突出显示导航元素。但是,滚动间谍仅在到达浏览器/设备顶部时才更改活动状态。因为我的导航栏是固定的,所以我需要将偏移量应用于 scrollspy 以偏移 51px(导航栏高度)。
我已经尝试了一切,但我无法让它工作。请检查我的小提琴,看看你是否能找到我出错的地方,这对我有很大帮助。
这是我最小化的代码...
HTML
CSS
脚本
小提琴
javascript - 使用 twitter 引导滚动间谍
我一直在尝试让滚动间谍在我的引导站点上工作,但我无法让它工作。我遇到的问题是,无论我滚动到哪里,滚动都没有效果。你可以看到我在这里做什么。
我已经执行了所有需要的步骤,即下面是正文标签
导航也在那里:
也调用了scrollspy。
任何人都可以看看,请指出我在这里忽略或做错了什么。
twitter-bootstrap - 包含图像时,Bootstrap scrollpy 会在刷新时中断
我在我在 CMS 系统中构建的网站中使用 bootstrap scrollspy,当我刷新我的一个页面时,它当前不会同步。它在没有任何图像的不同页面中完美运行,但在具有大量图像的页面上它会中断。当位于 CMS 系统之外时,它也不起作用。由于 CMS 系统,我必须使用数据属性来调用 scrollspy。
我尝试了许多不同的方法,例如更改 css 和重新组织页面,但对于有图像的页面来说,总是同样的问题。关于可能导致问题的任何想法?
javascript - $.fn 不是对象
我正在尝试将 scrollspy 与 bootstrap 一起使用,但遇到了一些错误。错误控制台不断返回:TypeError: 'undefined' is not an object (evaluating '$.fn')
,在 bootstrap-scrollspy.js 的第 124 行,即这一行
,位于 ScrollSpy 插件定义下。我正在使用直接取自这个 jsFiddle的代码
有谁知道为什么会这样?
twitter-bootstrap - bootstrap:使用 scrollspy 时如何设计导航栏?
我已经使用 bootstrap 启动了一个单页项目,但我在使用 scrollspy 时遇到了一些问题,因为我需要使用类 nav 来改变我的导航栏样式(我的样式)。
谁能建议如何在没有导航类的情况下使 scrollspy 工作,或者在不更改 bootstrap.min.css 的情况下删除初始导航类属性的方法?
这是代码:
谢谢。
html - 如何更改引导滚动间谍活动链接颜色
我正在使用带有 bootstraps nav-pills navbar 的 scrollspy,并且似乎无法更改活动链接的颜色或悬停颜色。我一直在尝试各种组合,但似乎仍然无法弄清楚为什么我不能改变颜色。任何想法为什么?
CSS
导航
javascript - 滚动间谍卡在顶部,不跟随滚动
我正在从http://getbootstrap.com/components复制完全相同的代码和资源
但是,我不明白为什么只有在我的副本中,每当我刷新页面时,整个 ul 列表都会卡在它的位置,因此,如果我向下滚动,ul 就会离开屏幕。
这是我的版本:
如果我不刷新,则 ul 会正常工作,并在我滚动突出显示子菜单的任何地方跟随...设置active
类的 JQuery 似乎正在工作,因为带有active
类的子菜单是正确的。我完全不知道这怎么会发生......任何帮助将不胜感激!谢谢!
笔记:
- -。它适用于原始网站
- -。它适用于铬
- -。Bootstrap 2.3.2 版本工作正常
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 处理?
html - Bootstrap 3 Scrollspy 激活事件未触发
我正在尝试使用带有 Scrollspy 的 Bootstrap 3 RC1 创建一个站点。我的网页现在非常简单,基本上是这样设置的:
我通过调用初始化了 Scrollspy,$("section").scrollspy()
并设置了一个事件处理程序,如下所示:
我的问题是这个activate
事件永远不会被触发。有谁知道为什么它不工作?我注意到所有教程都使用导航栏来突出显示当前部分,但我真的不想要导航栏。