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

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

// 执行一些动做...

})

1. 代码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更多技术资讯可关注：gzitcast