基于Bootstrap3的滚动监听（Scrollspy）jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

dynamic-scrollspy是一款基于Bootstrap3的滚动监听（Scrollspy）jQuery插件。使用该jQuery插件可以非常轻松的制作出页面的滚动监听效果，它会自动为你添加一个侧边栏导航，并设置好原生的Bootstrap滚动监听。

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

使用方法

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

<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列作为侧边栏的滚动监听面板区域。你可以自行调整。

<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()方法来初始化该滚动监听插件。注意是在滚动监听区域的容器上调用初始化方法。

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

配置参数

$('#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

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

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

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

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

关于CSS样式

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

/* 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