前端开发极光我爱编程

Bootstrap Scrollspy plugin 简介

2016-07-27  本文已影响63人  磐创AI_聊天机器人

介绍

Scrollspy plugin 滚动监听插件,即自动更新导航插件,会根据滚动条的位置自动更新对应的导航目标。其基本的实现是随着页面的滚动,基于滚动条的位置向导航栏添加 .active class。

作用

Bootstrap Scrollspy plugin 实际效果图

可以比较清晰的方便用户看到浏览进度,浏览位置。

网页内容比较长的时候,单个页面本身也需要比较好的目录,来快速的定位用户需要的内容。

Bootstrap plugin 页面包含多个插件,并且每个插件也包含几个子项,通过侧边栏加上 Scrollspy plugin 来导航位置,查找起来感觉也是非常方便。

Bootstrap plugin 页面

使用

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 nav-tabs" role="tablist">
    ...
</ul>

效果

页面效果

引用

http://getbootstrap.com/javascript/#scrollspy

上一篇 下一篇

猜你喜欢

热点阅读