Bootstrap Scrollspy plugin 简介
2016-07-27 本文已影响63人
磐创AI_聊天机器人
介绍
Scrollspy plugin 滚动监听插件，即自动更新导航插件，会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着页面的滚动，基于滚动条的位置向导航栏添加 .active class。
作用
- 方便用户定位自己的浏览进度
Bootstrap Scrollspy plugin 实际效果图
可以比较清晰的方便用户看到浏览进度，浏览位置。
- 方便用户通过内容目录进行跳转
网页内容比较长的时候，单个页面本身也需要比较好的目录，来快速的定位用户需要的内容。
Bootstrap plugin 页面包含多个插件，并且每个插件也包含几个子项，通过侧边栏加上 Scrollspy plugin 来导航位置，查找起来感觉也是非常方便。
Bootstrap plugin 页面
使用
- 监听对象需要的设置
以 body 为例，官方建议添加到 body 。
设置 position
body { position: relative;}
设置 data-spy data-target
<body data-spy="scroll" data-target="#navbar-example">
...
<div id="navbar-example">
<ul class="nav nav-tabs" role="tablist">
...
</ul>
</div>
...
</body>
- 导航栏需要的设置
ul 中添加 class="nav"
<ul class="nav nav-tabs" role="tablist">
...
</ul>
效果
-
代码效果
随着页面内容滚动，导航栏相应的 li 会被添加 class="active" 属性。
代码效果
-
页面效果
页面效果
