位置: 编程技术 - 正文
Bootstrap滚动监听（Scrollspy）插件详解(bootstrap滚动监听效果)
编辑：rootadmin推荐整理分享Bootstrap滚动监听（Scrollspy）插件详解(bootstrap滚动监听效果)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:js监听滚动scrolltop,js监听滚动scrolltop,js 监听滚动条,bootstrap滚动监听原理,js滚动监听,bootstrap 滚动监听,bootstrap滚动监听原理,bootstrap滚动监听原理,内容如对您有帮助，希望把文章链接给更多的朋友！
滚动监听（Scrollspy）插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
如果您想要单独引用该插件的功能，那么您需要引用 scrollspy.js。或者，正如 Bootstrap 插件概览 一章中所提到，您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。
一、用法您可以向顶部导航添加滚动监听行为：
1、通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的父元素的 ID 或 class 的属性 data-target。为了它能正常工作，您必须确保页面主体中有匹配您所要监听链接的 ID 的元素存在。
2、通过 JavaScript：您可以通过 JavaScript 调用滚动监听，选取要监听的元素，然后调用 .scrollspy() 函数：$('body').scrollspy({ target: '.navbar-example' })二、滚动监听滚动监听插件是用来根据滚动条所处在的位置自动更新导航项目， 显示导航项目高亮显示。
这里有两个重要的属性，如下图：
PS：在一个菜单和一个容易的时候，data-target 不设置也可以稳定实现滚动监听高亮。但多个导航时，你不关联其中一个，会导致错误，所以，一般要加上。
如果使用 JavaScript 脚本方式， 可以去掉 data-*， 使用脚本属性定义： offset、 spy和 target。具体方法如下：
滚动监听还有一个切换到新条目的事件。
//事件绑定在导航上
$('#nav').on('activate.bs.scrollspy', function() { alert('新条目被激活后触发此事件！');}); 滚动监听还有一个更新容器 DOM 的方法。
//HTML 部分
//删除内容时，刷新一下 DOM，避免导航监听错位
注意：这个方法必须使用 data-*声明式。
标签: bootstrap滚动监听效果
本文链接地址:https://www.jiuchutong.com/biancheng/373354.html 转载请保留说明！
