接上一篇文章《[译]Bootstrap的Affix与ScrollSpy用法[一]》，我们在前一篇已经分享了如何使用Bootstrap的Affix插件，这一篇接着分享如何结合ScrollSpy实现前面例子中的效果。
使用ScrollSpy(滚动监听)
为了给我们的项目增加ScrollSpy效果，我们必须定义当页面滚动时需要监听(spy)的元素，这个元素通常都是body元素。ScrollSpy要求我们必须使用Bootstrap的 导航(nav) 组件。
首先，我们把data-spy="scroll"属性/值应用到要监听的body元素上。这里值得一提的是，Bootstrap建议我们把监听的元素的position属性设置为relative。
接下来，我们通过给我们需要监听的元素添加data-target属性来标识特定的部分。这个属性的值必须与我们nav组件的父级元素的id或者class属性相匹配。所以我们的body标签应该是这样的（注意：“.”包含在data-*属性的值中）。
<body data-spy="scroll" data-target=".scrollspy">
同affix插件一样，我们也可以通过JavaScript来激活ScrollSpy插件。我们的例子并没有使用此选项。激活插件后，我们的HTML结构应该是这样的：
<body data-spy="scroll" data-target=".scrollspy">
<!-- content here... -->
<div class="col-md-3 scrollspy">
<ul id="nav" class="nav hidden-xs hidden-sm" data-spy="affix">
<!-- nav items here... -->
</ul>
</div>
<!-- content here... -->
</body>以及必须的CSS：
body {
position: relative;
}我们可以通过浏览器的开发者工具来理解这个插件的作用。当用户滚动页面的时候，插件会“watch”目标元素并为适当的li子元素增加active属性。我们就可以通过这个class属性来定义激活元素的样式。一些li包含子导航元素，我们也可以通过样式来实现很好看的效果。
当使用ScrollSpy插件的时候，会生成下面这样的HTML结构：
下面是我为我们这个例子中导航组件添加的样式。注意：我们需要把我使用的导航组件的样式考虑在内。
.nav .active {
font-weight: bold;
background: #72bcd4;
}
.nav .nav {
display: none;
}
.nav .active .nav {
display: block;
}
.nav .nav a {
font-weight: normal;
font-size: .85em;
}
.nav .nav span {
margin: 0 5px 0 2px;
}
.nav .nav .active a,
.nav .nav .active:hover a,
.nav .nav .active:focus a {
font-weight: bold;
padding-left: 30px;
border-left: 5px solid black;
}
.nav .nav .active span,
.nav .nav .active:hover span,
.nav .nav .active:focus span {
display: none;
}总结
下面是我们例子的链接：
这篇文章中，我们看到了如何使用Bootstrap的affix插件和scrollspy插件来实现页面滚动效果。你可能已经在Bootstrap的网站看到过这个效果，现在你应该已经知道了它们是如何现实的了。
如果你正在使用这些组件，或者其他第三方的相似组件，可以在评论中来给我们分享你的经验。
via：SitePoint
focus 2015/08/27 10:23
如果顶部使用置顶的导航栏,那么affix定位会被遮挡,在官网上找到解决办法为 padding-top: 100px; margin-top: -90px;但是这样的话,滚动定位就无法识别,因为差了一些高度.不知道有没有解决办法,让置顶导航栏和左侧affix同时有效
Specs 2015/08/27 14:21
@ 你说的就是类似与我网站的这个效果吧？
focus 2015/08/29 15:39
@ 置顶菜单是有,但是没有发现左侧或者右侧的菜单.没有滚动监听吧?
Specs 2015/08/31 08:59
@ 固定是用的affix效果，spy的是那个滚动监听。