Bootstrap 的 ScrollSpy
一、简介
ScrollSpy 就是滚动监听。设置滚动监听方式有两种：
标签 API
JavaScript 代码
监听区域也有两种可能：
1.body 标签
2.自定义标签元素
{注意} ScrollSpy 需要 nav 组件的代码 支持，才会正确高亮激活项。
二、通过标签 API
通过标签 API 设置滚动监听的方式，就是在要监听区域上：
1.标记为滚动区域：添加 data-spy="scroll"。
2.指明在滚动过程中受到激活控制的代码单元：data-target="#navbarWrapper"。
2.1 借助 body 标签
body{
margin-top:51px;
}
article{
height:500px;
}
这里使用了 固定在顶部的导航条，导航条本身有高度 51px，为了不会遮挡住 #contentWrapper 内容区域，需要给 body 设置 margin-top: 51px；内容区域中，#home 中的 h2 标签默认有样式 margin-top: 20px。
那么页面加载完成后，若想让 #home 导航项激活，需要给滚动区域（这里指 ）添加偏移量 data-offset="71"（至少为 51px + 20px = 71px）。
2.2 借助自定义标签
这里 是完整的例子。
#scrollableWrapper{
height:200px;
overflow:auto;
position:relative;
}
article{
height:500px;
}
因为 #home 中的 h2 标签有默认样式 margin-top: 20px，所以还需要给滚动区域（这里指 #scrollableWrapper）添加偏移量 data-offset="20"。
三、通过 JavaScript 代码
3.1 借助 body 标签
body{margin-top:51px;}article{height:500px;}
$('body').scrollspy({target:'#navbarWrapper',offset:71})
3.2 借助自定义标签
#scrollableWrapper{height:200px;overflow:auto;position:relative;}article{height:500px;}
$('#scrollableWrapper').scrollspy({target:'#navbarWrapper',offset:20})
四、ScrollSpy 的事件回调
在滚动监听过程中，每当激活一个导航项，都会触发一个事件 activate.bs.scrollspy。必要时，可在这个事件的回调函数里写些业务逻辑。
$('#navbarWrapper').on('activate.bs.scrollspy',function(e){console.log(e.target);})
