问题标签 [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 投票
0 回答
113 浏览

jquery - Bootstrap Scrollspy 不一致的行为

我对我在网站上实施的滚动间谍行为感到困惑。问题是每当我滚动到 DOM(在 DOM 高度内滚动)时,菜单的活动状态是不一致的。它有时不活跃,有时活跃。它具有平滑滚动功能,每当单击菜单时,它都会滚动到该元素,并在到达目标元素时激活 scrollspy。问题是它有时会激活,有时不会。有4个导航对应4个区块。当我单击这些导航时,它有时会在到达目标元素时处于活动状态,有时不会,甚至不会以模式化的方式激活。如果有人可以向我解释或帮助我修复此错误,将不胜感激:)

0 投票
2 回答
598 浏览

javascript - 使用javascript将scrollspy添加到顶部

我正在尝试构建一个类似于 getboostrap 网站的滚动间谍,其中侧导航栏在您滚动时上升到页面顶部,但随后会停留在顶部(http://getbootstrap.com/css/)。我在我的 html 中编写了一个小脚本来访问标题大小,以便它与不同的标题兼容,但我想将它移动到一个单独的 javascript 文件中。在这里,我包括了我所有的 html 和用于 scrspy 和 affix 的 css。

HTML:

CSS:

我在一个单独的 .js 文件中尝试了这个,并在 html 中有一个指向它的链接,但它似乎不起作用。JS:

0 投票
1 回答
981 浏览

html - 使用 MVC 4 实现 Scrollspy

我有一个基于 MVC 4框架和 Bootstrap(twitter) 的 Web 应用程序,我想让我的一个页面成为一个带有 scrollspy 的单页导航:

我在整个网站的顶部都有一个固定的导航栏,在网站的一个页面中,我希望我添加一个带有 scrollspy 的侧栏(“nav nav-pills nav-stacked pull-left”)。

col-md-3 =在左侧将存储我的侧边栏

col-md-9 =在右侧将存储我的上下文

我尝试了不同的东西,但似乎没有任何效果,我注意到的一件事是我需要添加到 body 标签:

但在 MVC 中,主体标签位于“_layout”上,我不想触摸这个共享的局部视图。

我能做些什么 ?也许有人在 MVC 中实现了这个功能,可以给我一个小例子吗?

这是我的代码:

我在这里缺少什么?

0 投票
0 回答
375 浏览

javascript - 当父部分不活动时如何折叠scrollspy的子元素

我试图模仿Bootstrap 的scrollspy 如何在父元素处于活动状态时扩展以显示子标题,以及当您在其中移动时它如何继续突出显示这些子标题。我最多有两个子标题。

当您滚动列表时,我让 scrollspy 工作并突出显示每个元素。我的问题是当内部元素不活动时我无法隐藏它们。我知道我需要使用 Javascript 或 JQuery,但我不明白如何。

我看过这个这个,但我认为它们对我没有足够的帮助。

0 投票
0 回答
348 浏览

twitter-bootstrap - 平滑滚动、scrollspy 和 Bootstrap

当我在我的网站上使用平滑滚动和 scrollspy 时遇到问题。当我单击导航菜单链接时,我将被定向到相应的部分。在本节中,我有标签。当我单击其中一个选项卡时,滚动条会上下移动。

这是我的小提琴

不知道为什么我的 JS 没有触发。有人可以帮忙吗?

示例滚动间谍代码:

示例滚动代码:

0 投票
1 回答
92 浏览

javascript - 奇怪的代码使 Bootstrap scrollspy 工作,我如何跟踪错误?

因此,以下选择器和定义以某种方式允许我的 scrollspy 主要表现出它在 Chrome 中应有的方式。没有它,scrollspy 会跳到屏幕的一半。CSS看起来像这样。

这种类的链接非常奇怪,我想了解正在发生的事情并找到一种更好的方法来完成它正在做的事情。此外,当我进入渲染页面中的元素检查器时,浏览器正在将我的“affix”类更改为“affix-top”,这也很奇怪。

我欢迎任何有关如何追踪问题的建议,并对如何解决问题的建议持开放态度。

仅供参考,我的 scrollspy 有两个级别的孩子,所以它比 getboostrap.com 上的列表更复杂。lesscss.com 网站上有这样的例子。

0 投票
1 回答
1591 浏览

twitter-bootstrap - Scrollspy 无法使用导航选项卡

我正在尝试将 scrollspy 添加到网站上的产品描述页面,该页面具有水平选项卡、“描述”、功能和评论选项卡。选项卡确实可以正常工作,但滚动间谍无法正常工作,并且仅显示最后单击的选项卡区域。下面给出了代码,非常感谢任何帮助。

请参阅 jsfiddle 中的代码@http ://jsfiddle.net/iqadeer/1t5fqhbu/1/ jsfiddle 代码

0 投票
2 回答
424 浏览

jquery - Scrollspy 不适用于 jQuery 和 Bootstrap

我正在尝试做一个不错的导航栏,就像您在 Bootstrap 的“入门”页面上看到的那样。

到目前为止,很多工作都在工作,除了将活动状态应用于好元素的滚动间谍。

我不知道为什么它不起作用,我确实<body>按照其他问题中的建议修复了 Height:100% 。

这是我的 HTML:

0 投票
1 回答
1827 浏览

javascript - 使用 Bootstrap ScrollSpy 滚动到 NEXT/PREV 按钮

我正在寻找创建通过页面上的锚点的下一个和上一个按钮的答案,但找不到我需要的东西。这可能接近我想要的,所以我决定以它为起点:如何在不知道锚名称的情况下使链接转到页面上的下一个锚?

我用该答案中提出的概念创建了一个小提琴,并试图使其与引导程序的 scrollspy 一起工作(检测当前部分和锚点)。

我已经做到了这一点:http: //jsfiddle.net/gukne0oL/2/

原始答案针对<a>标签,但在引导程序的滚动间谍中,它将active类添加到<li>包装标签的<a>标签中。所以我相应地改变了它......我觉得它很接近?但我不能告诉...

任何人都可以帮忙吗?谢谢!

0 投票
1 回答
535 浏览

javascript - 无法读取未定义的属性“$scrollElement”

当我向下滚动页面时,此脚本的标题出现错误。我想要部分导航菜单上的进度条。

当前代码:

错误在这一行:

有什么建议可以解决这个问题吗?

这里是演示链接:DEMO