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