bootstrap经常使用组件(五)滚动监听Scrollspy插件

【简介】

页面滚动行为，是常见的一个特效场景。常见的业务需求有，鼠标放在某个区域，鼠标滚动，某个区域发生滚动行为，页面整个页面在浏览器中不发生滚动；又例如，会根据滚动条的位置自动更新对应的导航目标

….bootstrap

的

滚动监听（

Scrollspy

）插件，即自动更新导航插件，其基本的实现是随着您的滚动，基于滚动条的位置向导航栏添加

.active class

。

【引入文件】

须要引入的文件有bootstrap的css样式文件。由于bootstrap是基于jquery的，因此要先引入jq文件，再引入bootstrap的js文件。

[HTML]

纯文本查看

复制代码

?

1 2 3 4 5

< link rel = "stylesheet" href = "lib/css/bootstrap.css" > < script src = "lib/js/jquery.v1.12.4.js" ></ script > < script src = "lib/js/bootstrap.js" ></ script >

【基本结构与效果】

1. 代码1

[HTML]

纯文本查看

复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< div data-spy = "scroll" data-target = "#myScrollspy" data-offset = "0" style = "height:200px;overflow:auto; position: relative;" > < h4 id = "qianduan" >前端与开发</ h4 > < p >前端开发是建立Web页面或app等前端界面呈现给用户的过程。前端开发经过HTML，CSS及JavaScript以及衍生出来的各类技术、框架、解决方案，来实现互联网产品的用户界面交互 [1] 。它从网页制做演变而来，名称上有很明显的时代特征。在互联网的演化进程中，网页制做是Web1.0时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML五、CSS3的应用，现代网页更加美观，交互效果显著，功能更增强大。 </ p > < h4 id = "java" >JavaEE</ h4 > < p >Java是一门面向对象编程语言，不只吸取了C++语言的各类优势，还摒弃了C++里难以理解的多继承、指针等概念，所以Java语言具备功能强大和简单易用两个特征。Java语言做为静态面向.Java是一门面向对象编程语言，不只吸取了C++语言的各类优势，还摒弃了C++里难以理解的多继承、指针等概念，所以Java语言具备功能强大和简单易用两个特征。Java语言做为静态面向Java是一门面向对象编程语言，不只吸取了C++语言的各类优势，还摒弃了C++里难以理解的多继承、指针等概念，所以Java语言具备功能强大和简单易用两个特征。Java语言做为静态面向.Java是一门面向对象编程语言，不只吸取了C++语言的各类优势，还摒弃了C++里难以理解的多继承、指针等概念，所以Java语言具备功能强大和简单易用两个特征。Java语言做为静态面向 </ p > < h4 id = "ui" >UI设计</ h4 > < p >UI设计（或称界面设计）是指对软件的人机交互、操做逻辑、界面美观的总体设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。UI设计（或称界面设计）是指对软件的人机交互、操做逻辑、界面美观的总体设计。UI设计分为实体UI和虚拟UI，互联网说的UI设计是虚拟UI，UI即User Interface(用户界面)的简称。 </ p > </ div >

效果1

【事件】

activate.bs.scrollspy

：

每当一个新项目被滚动监听激活时，触发该事件。

[JavaScript]

纯文本查看

复制代码

?

1 2 3 4 5

$( '#myScrollspy' ).on( 'activate.bs.scrollspy' , function () { // 执行一些动做... })

2. 代码2

Html的结构代码，和代码1的结构代码同样。

[JavaScript]

纯文本查看

复制代码

?

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23

$( function (){ removeSection = function (e) { $(e).parents( ".section" ).remove(); $( '[data-spy="scroll"]' ).each( function () { var $spy = $( this ).scrollspy( 'refresh' ) }); } $( "#myScrollspy" ).scrollspy(); $( '#myScrollspy' ).on( 'activate.bs.scrollspy' , function () { var currentItem = $( ".nav li.active > a" ).text(); console.log( "目前您正在查看 - " + currentItem); }) });

效果2

更多技术资讯可关注：gzitcast