Bootstrap中的滚动监听

来源：互联网发布：淘宝客佣金怎么设置编辑：程序博客网时间：2024/06/05 21:59

Bootstrap中的滚动监听---引用scrollspy.js，或者是bootstrap.js。

具体看下列代码：

首先设置一下Css简单的样式

.div1{height: 300px;width: 100%;background: red;}body{position: relative;}

不需要JS代码，具体的Html代码如下：

<body data-spy="scroll" data-toggle="#nav" ><h2>滚动监听--效果随着页面的内容滚动，某个导航中的项目，会自动更改.active位置</h2><p>实现思路：（1）页面中必须有个导航菜单nav--可以定义中间的一项为active</p><p>（2）导航菜单中的连接的href的值必须和某个锚点的名称是以一样的</p><p>（3）为页面添加滚动事件的监听函数</p><p>body.onscroll=function(){ if(body.offsetTop=="某个锚点距离顶部的距离"){此锚点对应的超链接的父元素li添加active}  }</p><div class="container">    <h2>滚动监听----scrollspy</h2>    <div class="row">        <div class="col-md-10">            <h4 id="tiao1">第一部分</h4>            <div class="div1"></div>            <h4 id="tiao2">第二部分</h4>            <div class="div1"></div>            <h4 id="tiao3">第三部分</h4>            <div class="div1"></div>            <h4 id="tiao4">第四部分</h4>            <div class="div1"></div>        </div>        <div class="col-md-2 hidden-sm hidden-xs" >            <!--在导航最外面加上class="affix"（固定定位）,data-offset-top="80"(距离顶部80px的时候变化成固定定位)-->            <div data-spy="affix"  data-offset-top="60" class="affix" id="nav">                <!--竖直胶囊导航-->                <ul class="nav nav-pills nav-stacked">                    <li><a href="#tiao1">第一部分</a></li>                    <li><a href="#tiao2">第二部分</a></li>                    <li><a href="#tiao3">第三部分</a></li>                    <li><a href="#tiao4">第四部分</a></li>                </ul>            </div>        </div>    </div></div><script src="js/jquery-1.11.3.js" rel="stylesheet"></script><script src="js/bootstrap.min.js" rel="stylesheet"></script><script>    //    用来提示自己出现的错误---只限于开发阶段使用    (function () {        var s = document.createElement("script");        s.onload = function () {            bootlint.showLintReportForCurrentDocument([]);        };        s.src = "js/bootlint.js";        document.body.appendChild(s)    })()</script>

阅读全文

0 0