在 BootStrap 插件中提供了对于滚动条位置监听的功能。实现了滚动条滚动,页面导航自动切换的效果。
实现思路
- 创建导航,通过 BootStrap 提供的导航样式;
- 创建页面主要内容,也就是需要滚动的内容;这里需要注意,由于要监听的是滚动条,所以对内容的容器要设置
overflow:scroll
属性,当内容超过容器高度的时候显示滚动条,才能被监听到; - 让滚动的内容和导航绑定,所以需要给导航设置
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>