【技术】导航动起来，Bootstrap 滚动监听

在 BootStrap 插件中提供了对于滚动条位置监听的功能。实现了滚动条滚动，页面导航自动切换的效果。

实现思路

1. 创建导航，通过 BootStrap 提供的导航样式；
2. 创建页面主要内容，也就是需要滚动的内容；这里需要注意，由于要监听的是滚动条，所以对内容的容器要设置 overflow:scroll属性，当内容超过容器高度的时候显示滚动条，才能被监听到；
3. 让滚动的内容和导航绑定，所以需要给导航设置 id 属性，标识唯一性，通过滚动的内容绑定导航；

代码演示

<!-- 创建导航栏 -->
<div id="div1" class="navbar navbar-default navbar-fixed-top">
    <ul class="nav navbar-nav">
        <li><a href="#title1">标题1</a></li>
        <li><a href="#title2">标题2</a></li>
        <li><a href="#title3">标题3</a></li>
        <li><a href="#title4">标题4</a></li>
    </ul>
</div>

<!-- 
	创建滚动内容 
	绑定滚动监听事件：data-spy="scroll"
	当前滚动内容和哪个导航关联：data-target="#div1" 
	滚动内容对象必须设置：
		position: relative;相对定位；
		overflow: scroll;隐藏多余内容显示滚动条
-->
<div data-spy="scroll" data-target="#div1" 
     style="width:100%;height:500px;overflow:scroll;position:relative;">
    <h3 id="title1">标题1</h3>
    ....
    <h3 id="title2">标题2</h3>
    ....
    <h3 id="title3">标题3</h3>
    ....
    <h3 id="title4">标题4</h3>
</div>