Bootstrap滚动监听（Scrollspy）插件详解
滚动监听（Scrollspy）插件，即⾃动更新导航插件，会根据滚动条的位置⾃动更新对应的导航⽬标。其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加 .active class。
如果您想要单独引⽤该插件的功能，那么您需要引⽤ scrollspy.js。或者，正如 Bootstrap 插件概览⼀章中所提到，您可以引⽤ bootstrap.js 或压缩版的 bootstrap.min.js。
⼀、⽤法
您可以向顶部导航添加滚动监听⾏为：
1、通过 data 属性：向您想要监听的元素（通常是 body）添加 data-spy="scroll"。然后添加带有 Bootstrap .nav 组件的⽗元素的 ID 或 class 的属性 data-target。为了它能正常⼯作，您必须确保页⾯主体
中有匹配您所要监听链接的 ID 的元素存在。
<body data-spy="scroll" data-target=".navbar-example">
...
<div class="navbar-example">
<ul class="nav nav-tabs">
...
</ul>jquery滚动条滚动到底部
</div>
...
</body>
2、通过 JavaScript：您可以通过 JavaScript 调⽤滚动监听，选取要监听的元素，然后调⽤ .scrollspy() 函数：
$('body').scrollspy({ target: '.navbar-example' })
⼆、滚动监听
滚动监听插件是⽤来根据滚动条所处在的位置⾃动更新导航项⽬，显⽰导航项⽬⾼亮显⽰。
//基本实例
<nav id="nav" class="navbar navbar-default">
<a href="#" class="navbar-brand">Web 开发</a>
<ul class="nav navbar-nav">
<li>
<a href="#html5">HTML5</a>
</li>
<li>
<a href="#bootstrap">Bootstrap</a>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown">JavaScript <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="#jquery">jQuery</a>
</li>
<li>
<a href="#yui">Yui</a>
</li>
<li>
<a href="#extjs">Extjs</a>
</li>
</ul>
</li>
</ul>
</nav>
<div data-offset="0" data-target="#nav" data-spy="scroll" >
<h4 id="html5">HTML5</h4>
<p>
标准通⽤标记语⾔下的⼀个应⽤ HTML 标准⾃ 1999 年 12 ⽉发布的 HTML4.01后，后继的 HTML5 和其它标准被束之⾼阁，为了推动 Web 标准化运动的发展，⼀些公司联合起来，成⽴了⼀个叫做 Web Hypertext Application Technology Working Group（Web 超双⽅决定进⾏合作，来创建⼀个新版本的 HTML。
</p>
<h4 id="bootstrap">Bootstrap</h4>
<p>
Bootstrap，来⾃ Twitter，是⽬前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。 [1]它由 Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是⼀个 CSS/HTML 框架。Bootstrap提供了 </p>
<h4 id="jquery">jQuery</h4>
<p>
JQuery 是继 prototype 之后⼜⼀个优秀的 Javascript 库。它是轻量级的 js库，它兼容 CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0 及后续版本将不再⽀持 IE6/7/8 浏览器。jQuery 使⽤户能更⽅便地处理 HTML（标准通 </p>
<h4 id="yui">Yui</h4>
<p>
近⼏年随着 jQuery、Ext 以及 CSS3 的发展，以 Bootstrap 为代表的前端开发框架如⾬后春笋般挤⼊视野，可谓应接不暇。不论是桌⾯浏览器端还是移动端都涌现出很多优秀的框架，极⼤丰富了开发素材，也⽅便了⼤家的开发。这些框架各有特点，本⽂对这些 </p>
<h4 id="extjs">Extjs</h4>
<p>
ExtJS 可以⽤来开发 RIA 也即富客户端的 AJAX 应⽤，是⼀个⽤ javascript写的，主要⽤于创建前端⽤户界⾯，是⼀个与后台技术⽆关的前端 ajax 框架。因此，可以把 ExtJS ⽤在.Net、Java、Php 等各种开发语⾔开发的应⽤中。ExtJs 最开始基于 YUI 技术， </p>
</div>
这⾥有两个重要的属性，如下图：
PS：在⼀个菜单和⼀个容易的时候，data-target 不设置也可以稳定实现滚动监听⾼亮。但多个导航时，你不关联其中⼀个，会导致错误，所以，⼀般要加上。
如果使⽤ JavaScript 脚本⽅式，可以去掉 data-*，使⽤脚本属性定义： offset、 spy和 target。具体⽅法如下：
//使⽤脚本⽅式定义属性
$('#content').scrollspy({
offset : 0,
target : '#nav',
});
滚动监听还有⼀个切换到新条⽬的事件。
//事件绑定在导航上
$('#nav').on('activate.bs.scrollspy', function() {
alert('新条⽬被激活后触发此事件！');
});
滚动监听还有⼀个更新容器 DOM 的⽅法。
/
/HTML 部分
<section class="sec">
<h4 id="html5">HTML5 <a href="#" onclick="removeSec(this)">删除此项</a></h4>
<p>
...
</p>
</section>
//删除内容时，刷新⼀下 DOM，避免导航监听错位
function removeSec(e) {
$(e).parents('.sec').remove();
$('#content').scrollspy('refresh');
}
注意：这个⽅法必须使⽤ data-*声明式。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论