其實滾動監聽使用的情況還是很多的，比如導航居于右側，當主題內容滾動某一塊的時候，右側導航對應的要高亮。

實現功能

1、當滾動區域內設置的hashkey距離頂點到有效位置時，就關聯設置其導航上的指定項
2、導航必須是 .nav > li > a 結構，并且a上href或data-target要綁定hashkey
3、菜單上必須有.nav樣式
4、滾動區域的data-target與導航父級Id（一定是父級）要一致。

<div id="selector" class="navbar navbar-default"> <ul class="nav navbar-nav"> <li><a href="#one">one</a> </li> <li><a href="#two">two</a> </li> <li><a href="#three">three</a> </li> </ul></div><div data-spy="scroll" data-target="#selector" style="height:100px; overflow:hidden;overflow-y: auto;" > <h4 id="one" >ibe</h4><p>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/></p> <h4 id="two" >two</h4><p>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/></p> <h4 id="three" >three</h4><p>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/>One的具體內容<br/></p></div>

下面來看一下實現的具體代碼，原理：當滾動容器內的hashkey位置距離容器頂部只有 offset設置的值，就會設置導航中對應的href高亮。

ScrollSpy構造函數

首先新建一個構造函數，如下：

function ScrollSpy(element, options) {  this.$body     = $(document.body)  this.$scrollElement = $(element).is(document.body) ? $(window) : $(element)  this.options    = $.extend({}, ScrollSpy.DEFAULTS, options)  this.selector    = (this.options.target || '') + ' .nav li > a'  this.offsets    = []  this.targets    = []  this.activeTarget  = null  this.scrollHeight  = 0  this.$scrollElement.on('scroll.bs.scrollspy', $.proxy(this.process, this))  this.refresh()  this.process() }

該構造函數主要干了啥：

1.基本設置，主要是設置當前滾動元素是設置的body還是具體的某一塊元素；其次是導航的結構要是.nav li > a的結構，也就是你的菜單中也要有.nav這個class。

2.監聽元素滾動的時候，執行process方法。

3.同時初始化的時候也執行了refresh與process方法。

下面講解一下這幾個方法。

getScrolHeight方法

獲取滾動容器的內容高度（包含被隱藏部分）

this.$scrollElement[0].scrollHeight || Math.max(this.$body[0].scrollHeight, document.documentElement.scrollHeight)