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)与我们联系处理,敬请谅解!