Bootstrap5 滚动监听(Scrollspy)1

简介: Bootstrap5 滚动监听(Scrollspy)插件可自动更新导航目标,根据滚动条位置变化。通过在目标元素(如 body)添加 `data-bs-spy="scroll"` 和 `data-bs-target` 属性,关联导航栏与可滚动区域,确保导航项的 id 与链接匹配。可选设置 `data-bs-offset` 偏移量,默认10px。使用时需将元素的 CSS position 设为 "relative"。

Bootstrap5 滚动监听(Scrollspy)
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动。

如何创建滚动监听
以下实例演示了如何创建滚动监听:

实例





...




Section 1


Try to scroll this page and look at the navigation bar while scrolling!



...

尝试一下 »
实例解析
向您想要监听的元素(通常是 body)添加 data-bs-spy="scroll" 。

然后添加 data-bs-target 属性,它的值为导航栏的 id 或 class (.navbar)。这样就可以联系上可滚动区域。

注意可滚动项元素上的 id (

相关文章
|
索引 容器
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
Bootstrap4----网络系统、图像形状、轮播、滚动监听、多媒体对象、下拉菜单导航及按钮
|
8月前
|
资源调度 前端开发 数据可视化
R语言GARCH模型对股市sp500收益率bootstrap、滚动估计预测VaR、拟合诊断和蒙特卡罗模拟可视化
R语言GARCH模型对股市sp500收益率bootstrap、滚动估计预测VaR、拟合诊断和蒙特卡罗模拟可视化
|
2月前
|
UED
Bootstrap5 滚动监听(Scrollspy)2
Bootstrap5 滚动监听(Scrollspy)插件能自动更新导航目标,随滚动条位置变化而动态调整。示例中,垂直导航栏随页面滚动实时高亮对应部分,如“Navbar Item 1”、“Item 2”等,提升用户体验。
|
8月前
|
前端开发 JavaScript
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
Bootstrap 5 保姆级教程(十三):滚动监听 & 侧边栏导航
|
前端开发 JavaScript
|
前端开发 容器
Bootstrap4(一)重点----网格系统,图像形状,轮播,多媒体对象,滚动监听
Bootstrap 提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。
196 0
Bootstrap4(一)重点----网格系统,图像形状,轮播,多媒体对象,滚动监听
N..
|
8月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
77 0
|
前端开发 容器
|
前端开发 容器
|
前端开发 开发者 容器