一、簡介
ScrollSpy 就是滾動監聽。設置滾動監聽方式有兩種：
- 標簽 API
- JavaScript 代碼
監聽區域也有兩種可能：
body標簽- 自定義標簽元素
{注意} ScrollSpy 需要 nav 組件的代碼 支持，才會正確高亮激活項。
二、通過標簽 API
通過標簽 API 設置滾動監聽的方式，就是在要監聽區域上：
- 標記為滾動區域：添加
data-spy="scroll"。 - 指明在滾動過程中受到激活控制的代碼單元：
data-target="#navbarWrapper"。
2.1 借助 body 標簽
body {
margin-top: 51px;
}
article {
height: 500px;
}
<body data-spy="scroll" data-offset="71" data-target="#navbarWrapper">
<div id="navbarWrapper" class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
</ul>
</div>
<div id="contentWrapper" class="container">
<article id="home"><h2>Home</h2><P>...</P></article>
<article id="profile"><h2>Profile</h2><P>...</P></article>
<article id="messages"><h2>Messages</h2><P>...</P></article>
</div>
</body>
這里使用了 固定在頂部的導航條，導航條本身有高度 51px，為了不會遮擋住 #contentWrapper 內容區域，需要給 body 設置 margin-top: 51px；內容區域中，#home 中的 h2 標簽默認有樣式 margin-top: 20px。
那么頁面加載完成后，若想讓 #home 導航項激活，需要給滾動區域（這里指 <body>）添加偏移量 data-offset="71"（至少為 51px + 20px = 71px）。
2.2 借助自定義標簽
這里 是完整的例子。
#scrollableWrapper {
height:200px;
overflow:auto;
position: relative;
}
article {
height: 500px;
}
<div id="navbarWrapper" class="navbar navbar-default navbar-static">
<div class="navbar-header">
<a class="navbar-brand" href="#">Project name</a>
</div>
<ul class="nav navbar-nav pull-right">
<li><a href="#home">Home</a></li>
<li><a href="#profile">Profile</a></li>
<li><a href="#messages">Messages</a></li>
</ul>
</div>
<div id="scrollableWrapper" data-spy="scroll" data-offset="20" data-target="#navbarWrapper">
<article id="home"><h2>Home</h2></article>
<article id="profile"><h2>Profile</h2></article>
<article id="messages"><h2>Messages</h2></article>
</div>
因為 #home 中的 h2 標簽有默認樣式 margin-top: 20px，所以還需要給滾動區域（這里指 #scrollableWrapper）添加偏移量 data-offset="20"。
三、通過 JavaScript 代碼
3.1 借助 body 標簽
body {
margin-top: 51px;
}
article {
height: 500px;
}
<body>
<div id="navbarWrapper" class="navbar navbar-default navbar-fixed-top">
<!-- some code -->
</div>
<!-- some code -->
</body>
$('body').scrollspy({
target: '#navbarWrapper',
offset: 71
})
3.2 借助自定義標簽
#scrollableWrapper {
height:200px;
overflow:auto;
position: relative;
}
article {
height: 500px;
}
<div id="navbarWrapper" class="navbar navbar-default navbar-static">
<!-- some code -->
</div>
<div id="scrollableWrapper">
<!-- some code -->
</div>
$('#scrollableWrapper').scrollspy({
target: '#navbarWrapper',
offset: 20
})
四、ScrollSpy 的事件回調
在滾動監聽過程中，每當激活一個導航項，都會觸發一個事件 activate.bs.scrollspy。必要時，可在這個事件的回調函數里寫些業務邏輯。
$('#navbarWrapper').on('activate.bs.scrollspy', function (e) {
console.log(e.target);
})
五、參考鏈接
http://getbootstrap.com/javascript/#scrollspy
（完）