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> </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" style="height: 200px; overflow: auto; position: relative;padding: 0 10px;">
<h4 id="html5">HTML5</h4>
<p>
标准通用标记语言下的一个应用 HTML 标准自 1999 年 12 月发布的 HTML4.01后，后继的 HTML5 和其它标准被束之高阁，为了推动 Web 标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group（Web 超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而 W3C（World Wide Web Consortium，万维网联盟） 专注于 XHTML2.0。在 2006 年，
双方决定进行合作，来创建一个新版本的 HTML。
</p>
<h4 id="bootstrap">Bootstrap</h4>
<p>
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、 CSS、 JAVASCRIPT 的， 它简洁灵活， 使得 Web 开发更加快捷。 [1]它由 Twitter的设计师 Mark Otto 和 Jacob Thornton 合作开发，是一个 CSS/HTML 框架。Bootstrap提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。[2]国内一些移动开发者较为熟悉的框架，如 WeX5前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。[3]
</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（标准通用标记语言下的一个应用） 、 events、 实现动画效果， 并且方便地为网站提供 AJAX交互。jQuery 还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。 jQuery 能够使用户的 html 页面保持代码和 html 内容分离， 也就是说， 不用再在 html 里面插入一堆 js 来调用命令了， 只需要定义 id 即可。
</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 技术，由开发人员 JackSlocum 开发，通过参考 JavaSwing 等机制来组织可视化组件，无论从 UI 界面上 CSS 样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript 客户端技术的精品。
</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-*声明式。
以上就是本文的全部内容，希望对大家的学习有所帮助。
相关推荐
-
Bootstrap每天必学之滚动监听
本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下 1. Scrollspy currently requires the use of a Bootstrap nav component for proper highlighting of active links. ---- 使用滚动监听的话,导航栏必须采用 class="nav"的nav组件才可以: 下面是源代码中的一段,标红的部分可以证明这一点: 使用ScrollSpy的时候,需要采用<ul class=
-
BootStrap下拉菜单和滚动监听插件实现代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no
-
Bootstrap滚动监听组件scrollspy.js使用方法详解
其实滚动监听使用的情况还是很多的,比如导航居于右侧,当主题内容滚动某一块的时候,右侧导航对应的要高亮. 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致. <div id="selector" class=&qu
-
全面解析Bootstrap中scrollspy（滚动监听）的使用方法
bootstrap源码分析之scrollspy(滚动侦听) 源码文件: Scrollspy.js 实现功能 1.当滚动区域内设置的hashkey距离顶点到有效位置时,就关联设置其导航上的指定项 2.导航必须是 .nav > li > a 结构,并且a上href或data-target要绑定hashkey 3.菜单上必须有.nav样式 4.滚动区域的data-target与导航父级Id(一定是父级)要一致 <div id="selector" class="n
-
Bootstrap教程JS插件滚动监听学习笔记分享
本文主要来学习一下JavaScript插件--滚动监听. 1.案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de
-
学习Bootstrap滚动监听 附调用方法
本文为大家介绍Bootstrap滚动监听,供大家学习,具体内容如下 滚动监听 伴随着滚动条的滚动,列表项被不断切换激活 <!-- id="menu" 为data-target="#menu" 的监听对象--> <!-- navbar navbar-inner nav navbar-fixed-top 固定导航条 --> <div id="menu" class="navbar navbar-fixed-to
-
Android 滑动监听的实例详解
Android 滑动监听的实例详解 摘要: ScollBy,ScollTo是对内容的移动,view.ScollyBy是对view的内容的移动 view,ScollTo是对内容的移动(移动到指定位置),view.ScollyBy是对view的内容的移动(移动距离) 在次activity中,当手指点击TextView ,此时是ViewGroup 响应还是TextView响应呢? 代码实践: 在activity中重写onTouchEvent(): public boolean onTouchEvent
-
vue1.0和vue2.0的watch监听事件写法详解
如下所示: watch: { aaa: { handler: function (newVal,oldVal) { console.log('当前的值:'+ newVal); console.log('旧的值' + oldVal); }, deep: true //深度监听 } } 以上这篇vue1.0和vue2.0的watch监听事件写法详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
-
Vue之监听方法案例详解
vue中的监听方法 watch 注意 名字 你想监听哪个属性,就要和他起一样的名字 1.作用 用来监听vue实例中的数据变化 可以随时修改状态的变化 2.触发条件 当你监听的属性发生变化时,会自动调用对应的监听方法 3.使用场景 用于异步处理,开销比较大的运算 4.示例 watch:{ name(newvalue,oldvalue){ //计算属性可以接受两个参数,第一个参数是新的属性值,第二参数是老的属性值 // this.age // console.log('name属性发生变化了') c
-
Android TextWatcher内容监听死循环案例详解
Android TextWatcher内容监听死循环 TextWatcher如何避免在afterTextChanged中调用setText后导致死循环,今天在用TextView时,添加了addTextChangedListener方法监听内容改变,在afterTextChanged方法中又执行了setText方法,结果造成afterTextChanged方法再次调用,然后setText,因此造成了死循环的问题.列出此问题,以备后忘. 先贴Google文档原文说明: /** * This meth
-
Pygame实现监听鼠标示例详解
目录 初始化参数 鼠标移动 鼠标点击位置 输出鼠标位置及其对用的按钮 完整代码 pygame如何捕捉鼠标的活动 初始化参数 import pygame, sys from pygame.locals import * def print_text(font, x, y, text, color=(0, 0, 0)): """打印字体函数""" img_text = font.render(text, True, color) screen.bl
-
Spring事件监听机制观察者模式详解
目录 前言 观察者模式 观察者的角色定义 Java中的事件机制 Spring中的事件机制 Spring事件监听案例 小结 前言 Spring中提供了一套默认的事件监听机制,在容器初始化时便使用了这套机制.同时,Spring也提供了事件监听机制的接口扩展能力,开发者基于此可快速实现自定义的事件监听功能. Spring的事件监听机制是在JDK事件监听的基础上进行的扩展,也是在典型观察者模式上的进一步抽象和改进.所以,结合Spring的事件监听机制与观察者模式来学习,可以达到理论与实践的完美融合. 本
-
Bootstrap滚动监听（Scrollspy）插件详解
滚动监听(Scrollspy)插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标.其基本的实现是随着您的滚动,基于滚动条的位置向导航栏添加 .active class. 如果您想要单独引用该插件的功能,那么您需要引用 scrollspy.js.或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. 一.用法 您可以向顶部导航添加滚动监听行为: 1.通过 data 属性:向您想要监听的元素(通常是
-
jQuery-mobile事件监听与用法详解
本文实例讲述了jQuery-mobile事件监听与用法.分享给大家供大家参考,具体如下: 触摸事件 - 当用户触摸屏幕时触发(敲击和滑动) 滚动事件 - 当上下滚动时触发 方向事件 - 当设备垂直或水平旋转时触发 页面事件 - 当页面被显示.隐藏.创建.加载以及/或卸载时触发 一.初始化事件 1. ready 事件 页面加载完成 $(document).ready(function(){ //your code here... }); 2. 页面加载完成事件二 pageinit $(docume