scrollspy相关内容

带有滚动间谍和页面锚点的单页 Bootstrap 附加导航栏

这适用于单个页面,导航栏仅链接到本地​​锚点. 导航栏出现在标题之后,但向下滚动时会停留在顶部. 您可以在 在 github 页面上查看它的工作原理 但是我有两个链接/锚点偏移问题: 只要您不滚动,导航栏就会偏移和屏蔽锚点. 附加导航栏后,以下链接将按预期工作,但不是第一个. 正文边距会破坏布局,因为它会阻止标题从顶部开始: body {边距顶部:65px;} 我尝 ..

根据其悬停的页面部分的背景更改固定导航栏的类

我正在使用 Bootstrap 4 开发一个网站,该网站的部分具有浅色和深色背景以及固定的导航栏. 导航栏是深色的(具有 css 类 bg-dark),虽然它在明亮部分很容易看到,但 与深色部分无法区分. 我尝试将导航栏的 navbar-dark bg-dark 更改为 navbar-light bg-light 当用户到达 dark 部分 (解决方案 在 StackOverflow ..
发布时间:2021-12-24 09:15:56 前端开发

ScrollSpy对DIV的影响

我正在尝试实现与滚动间谍相同的效果,但我只想并排显示div,而不是导航项目.在左侧,我的div将是一整套表格,在右侧,我的div将包含信息摘要. 我有一个jsbin,它说明了我想要实现的目标: ..
发布时间:2020-07-06 08:02:47 其他开发

当没有更多可滚动区域时,Bootstrap ScrollSpy会跳过该部分

关于所选元素的滚动位置,我对Bootstrap ScrollSpy遇到问题.问题出现在页面底部,我在整个页面中有多个相对较短的内容部分.它们被折叠并展开onClick,(是的,如果我选择将其全部打开,则似乎没有问题),并且当我到达页面底部之前,通过scrollspy选择所有页面时,它会跳转到导航上的最后一个元素. 似乎没有更多可滚动区域了. (也不能添加额外的空白填充来终止设计) 我已 ..
发布时间:2020-07-06 08:02:43 其他开发

如何使用React实现scrollspy

我想实现一个没有引导程序的 scrollspy . 我已经在线检查了很多代码,它们都是由 jQuery 实现的. 如何仅使用React的力量实现 scrollspy ? 解决方案 我制作了一个React 包装器(用于⚡实时Codepen示例 const {useState, useEffect, useCallback, useRef} = React; /** ..
发布时间:2020-07-06 08:02:40 前端开发

Bootstrap 3.0 scrollspy响应式偏移

我正在尝试使Bootstrap的scrollspy在响应站点​​上可靠地工作,该站点上的顶部导航栏的高度根据媒体/浏览器的宽度而变化.因此,不是通过硬编码data-offset属性上的偏移量,而是通过像这样的Javascript初始化来动态设置它: $('body').scrollspy({ offset: 70, target: '#nav' }); 对于较宽的布局(即Bootstra ..

像示例一样,使ScrollSpy引导程序侧边栏的最低代码是什么?

我已经在引导页面上看到了左侧的ScrollSpy示例: http://twitter.github.io/bootstrap/2.3. 2/javascript.html#scrollspy 但是他们没有如何获得相同样式和效果的示例代码?实现此目标所需的最低代码是多少,因为我看到的所有JsFiddle示例都没有样式. 更新 我已停止在项目上使用scrollspy,因为滚动条 ..
发布时间:2020-07-06 08:02:36 其他开发

Bootstrap词缀导航栏用于带有scrollspy和页面锚点的单页

这是一个页面,其中的导航栏仅链接到本地​​锚点. 导航栏位于标题之后,但在向下滚动时会停留在顶部. 您可以在github页面上查看 但是链接/锚点存在两个偏移问题: 只要您不滚动,锚点就会被导航栏偏移并掩盖. 粘贴导航栏后,以下链接将按预期运行,但第一个链接无效. 由于页边距阻止标题从顶部开始,因此页边空白破坏了布局: body { margin-top: ..

Bootstrap词缀类跳到底部

我设法使scrollspy和affix插件正常工作,但是每当用户滚动到页面底部(如果使用小的浏览器窗口)时,词缀类便开始与另一个类发生冲突,并且词缀会跳转国家之间. 可以在此处查看示例: http://devng.sdss.org/results-science/ CSS为: .affix-top,.affix{ position: static; } #sidebar l ..
发布时间:2019-11-15 12:00:35 前端开发

使用scroll-spy更改导航栏背景类

我正在Bootstrap 4的网页上工作,该网页的各个部分具有浅色和深色背景以及固定的导航栏.导航栏是深色的(具有css类bg-dark),尽管在浅色部分很容易看到,但与深色的却无法区分. 我已经在页面上添加了Bootstrap的滚动间谍,但是 所做的是将active类添加到导航栏项中,如下所示: .page-section { padding: 70px 10px } ..
发布时间:2019-11-14 17:19:57 前端开发

Bootstrap 3-带有侧边栏的Scrollspy

我正在使用Bootstrap3.我想重新创建与Bootstrap网站上文档中的边栏相同的功能. 下面是我的代码,它也在这里: http://bootply.com/82119 两个问题. 当您向下滚动页面浏览每个部分时,侧边栏项目不会突出显示. 单击侧边栏项目时,它会跳到相关的锚点,但是一半的内容不可见.更改data-offset值似乎无效. 我在做什么错了? ..
发布时间:2019-11-13 12:54:18 JavaScript

Scrollspy Bootstrap v3.3无法正常工作

使用带导航条的Bootstrap v3.3. Affix工作正常,但我根本无法使scrollspy正常工作.我在此处创建了小提琴(从小提琴中删除了词缀),以尝试查看它是否不是我的JS或w/e不正确,但小提琴也不起作用. 下面是小提琴示例: .product-nav.affix { top: 0; left: 0; z-index: 1; width: 1 ..
发布时间:2019-11-13 12:16:16 JavaScript

如何在不使用引导程序的情况下使用scrollspy

有人知道如何在不使用引导程序的情况下使用scrollspy吗? 我正在尝试使用此存储库在我的一个项目中使用它: https://github.com/sxalexander/jquery-scrollspy 但是它只是不执行引导程序的操作. li 标记未标记为活动:( 任何帮助将不胜感激. 我尝试这样做: $('#intel_nav').scrollspy({ ..
发布时间:2019-11-07 19:30:01 JavaScript