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