bootstrap常用组件(五)滚动监听Scrollspy插件页面滚动行为，是常见的一个特效场景。常见的业务需求有，鼠标

【简介】

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

….bootstrap

的

滚动监听（

Scrollspy

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

.active class

。

【引入文件】

需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的，所以要先引入jq文件，再引入bootstrap的js文件。

[HTML]

纯文本查看

复制代码

<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]

纯文本查看

复制代码

<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时代的产物，早期网站主要内容都是静态，以图片和文字为主，用户使用网站的行为也以浏览为主。随着互联网技术的发展和HTML5、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]

纯文本查看

复制代码

$('#myScrollspy').on('activate.bs.scrollspy', function () {

// 执行一些动作...

})

2. 代码2

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

[JavaScript]

纯文本查看

复制代码

$(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