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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!