JS Scrollspy（scrollspy.js）
该Scrollspy插件用于自动更新的基础上滚动位置的导航列表的链接。
对于有关Scrollspy教程，请阅读我们引导Scrollspy教程 。
提示：Scrollspy插件经常与一起使用词缀插件。
通过data-*属性
添加data-spy="scroll" ，以应该使用的可滚动区域的元件（通常是这种<body>元素）。
然后添加data-target的ID值或导航栏（类名属性.navbar ）。 这是为了确保该navbar与滚动区相连。
需要注意的是滚动的元素必须导航栏的列表项中的链接（的ID匹配<div id="section1">匹配<a href="#section1"> ）。
可选data-offset属性指定计算涡旋盘的位置时，从顶部偏移的像素的数量。 当你觉得导航栏里面的链接跳转到滚动元素时，过早地改变状态还是太早了，这非常有用。 默认为10像素。
需要相对定位：与元素data-spy="scroll"要求CSS position属性，值为"relative"正常工作。
例
<!-- The scrollable area -->
<body data-spy="scroll"
data-target=".navbar" data-offset="50">
<!-- The navbar - The
<a> elements are used to jump to a section in the scrollable area -->
<nav
class="navbar navbar-inverse navbar-fixed-top">
...
<ul class="nav
navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<!-- Section 1
-->
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at
the navigation bar while scrolling!</p>
</div>
...
</body>
试一试» 通过JavaScript
与手动启用：
Scrollspy选项
选项可以通过数据属性或JavaScript进行传递。 对于数据属性，选项名称追加到数据 - ，如在数据偏移=“”。
| 名称 | 类型 | 默认 | 描述 | 尝试一下 |
|---|---|---|---|---|
| offset | number | 10 | 指定的像素数计算涡旋盘的位置时，从顶部偏移 | 尝试一下 |
Scrollspy方法
下表列出了所有可用的scrollspy方法。
| 方法 | 描述 | 尝试一下 |
|---|---|---|
| .scrollspy("refresh") | 当添加和删除从scrollspy元件，这种方法可用于刷新文档 | 尝试一下 |
Scrollspy活动
下表列出了所有可用的scrollspy事件。
| 事件 | 描述 | 尝试一下 |
|---|---|---|
| activate.bs.scrollspy | 当一个新的项目变成由scrollspy激活发生 | 尝试一下 |
例子
Scrollspy与动画滚动
如何在平滑页面滚动添加到在同一页上的锚定：
平滑滚动
// Add scrollspy to <body>
$('body').scrollspy({target: ".navbar",
offset: 50});
// Add smooth scrolling to all links inside a navbar
$("#myNavbar a").on('click', function(event){
//
Prevent default anchor click behavior
event.preventDefault();
// Store hash (#)
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
//
The optional number (800) specifies the number of milliseconds it takes to scroll to
the specified area (the speed of the animation)
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
}); 试一试» Scrollspy和词缀
利用词缀与Scrollspy插件插件一起：
水平菜单（导航栏）
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav
class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body> 试一试» 垂直菜单（Sidenav）
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills
nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body> 试一试»