基于Bootstrap3的滚动监听(Scrollspy)jQuery插件

bootstrap 滚动监听 2015-12-27

控件介绍
dynamic-scrollspy是一款基于Bootstrap3的滚动监听(Scrollspy)jQuery插件。使用该jQuery插件可以非常轻松的制作出页面的滚动监听效果,它会自动为你添加一个侧边栏导航,并设置好原生的Bootstrap滚动监听。
浏览器兼容

支持IE9+

演示下载 2044
使用方法

在原生的Bootstrap中就有滚动监听效果,但是它使用起来相对要复杂一些,你可以在这里找到原生Bootstrap滚动监听插件的使用方法。使用dynamic-scrollspy插件简化了这些操作,你可以通过简单的设置就生成一个非常好的页面滚动监听效果。

使用方法

使用该滚动监听插件需要引入Bootstrap3+的依赖文件,以及jQuery1.11.0+和dynamicscrollspy.js文件。

1
2
3
4
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5/css/bootstrap.min.css" />
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="js/dynamicscrollspy.js"></script>              
HTML结构

整个页面的滚动监听布局可以使用Bootstrap的网格布局,用9列作为文章的内容区域,用3列作为侧边栏的滚动监听面板区域。你可以自行调整。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <!-- 页面正文内容区域 -->
      <h2>......</h2>
      <p>......</p>
      ......
    </div>
    <div class="col-sm-3" id="scrollspy">
      <!-- 滚动监听区域 -->
    </div>
  </div>
</div>         
初始化插件

在页面DOM元素初加载完毕之后可以通过DynamicScrollspy()方法来初始化该滚动监听插件。注意是在滚动监听区域的容器上调用初始化方法。

1
$('#scrollspy').DynamicScrollspy();             

配置参数

1
2
3
4
5
6
7
8
9
$('#scrollspy').DynamicScrollspy({
  tH: 2, //lowest-level header to be included (H2)
  bH: 6, //highest-level header to be included (H6)
  genIDs: false, //generate random IDs for headers?
  offset: 100, //offset from viewport top for scrollspy
  ulClassNames: 'hidden-print', //add this class to top-most UL
  activeClass: '', //active class (besides .active) to add to LI
  testing: false //if testing, append heading tagName and ID to each heading
})               
  • tH:页面正文部分需要监听的最低级别的标题,默认为H2标签。
  • bH:页面正文部分需要监听的最高级别的标题,默认为H6标签。
  • genIDs:是否为标题随机生成ID,默认值为false。
  • offset:滚动监听面板距离viewport顶部的偏移值,默认为100。
  • ulClassNames:为最顶层的ul元素添加这个class。
  • activeClass:添加到当前激活的li元素上的class。
  • testing:如果设置为true,会为每一个标题添加tagName和id。
Destroy / Rebuild

销毁该滚动监听插件的方法为:

1
$('#somediv').DynamicScrollspy('destroy');               

或者使用下面的方法来刷新滚动监听插件。

1
$('#somediv').DynamicScrollspy();               

关于CSS样式

侧边栏的CSS样式你可以在Bootstrap的官网上找到更多的信息。下面是该滚动监听效果所必须的一些CSS样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
/* nav */
.nav {
  padding-left: 0px;
}
/* all anchors */
.nav > li > a {
  padding: 3px;
  border-left: 0px rgba(0,0,0,0);
}
/* first level */
.nav li >  a {
  padding-left: 10px;
}
/* second */
.nav .nav li >  a {
  padding-left: 20px;
  font-size:.9em;
}
/* third */
.nav .nav .nav li >  a {
  padding-left: 30px;
  font-size:.8em;
}
/* fourth */
.nav .nav .nav .nav li >  a {
  padding-left: 40px;
}
/* fifth */
.nav .nav .nav .nav .nav li >  a {
  padding-left: 50px;
}
/* active link */
li.active > a {
  font-weight:bold;
  border-left: 2px solid gray;
}
/* hide second level lists */
.nav .nav {
  display:none;
}
/* show second-level when active */
.nav > .active > .nav {
  display: block;
}               

Dynamic-Scrollspy滚动监听插件的github地址:https://github.com/psalmody/dynamic-scrollspy

本文转载请注明出处:http://www.zhuiye.com/detail_200.html