jq实现的楼层效果

来源：互联网发布：淘宝客短链接生成器编辑：程序博客网时间：2024/04/19 13:29

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        ul{            position: fixed;            left: 0;            top: 30%;        }        li{            height: 40px;            line-height: 40px;            list-style: none;            width: 100px;            text-align: center;            background: #f01;            color: #ffffff;            cursor:pointer;        }        a{            color: #ffffff;            text-decoration: none;        }        #a1{background: #dddddd;            height: 900px;            width: 90%;            margin-left: 10%;        }        #a2{background: #dddddd;            height: 900px;            width: 90%;            margin-left: 10%;        }        #a3{background: #dddddd;            height: 900px;            width: 90%;            margin-left: 10%;        }        #a4{background: #dddddd;            height: 900px;            width: 90%;            margin-left: 10%;        }        #a5{background: #dddddd;            height: 900px;            width: 90%;            margin-left: 10%;        }        .active{            background: #ddd;        }        .active>a{            color: #000;        }        #LouDao{            display: none;        }        #main{            overflow: hidden;        }    </style></head><body><ul id="LouDao">    <li><a>第一章</a></li>    <li><a>第二章</a></li>    <li><a>第三章</a></li>    <li><a>第四章</a></li>    <li><a>第五章</a></li></ul><div id="main">    <div id="a1">        这是一个悲惨的故事    </div>    <div id="a2">这是一个欢快的故事</div>    <div id="a3">这是一个伤心的故事</div>    <div id="a4">这是一个幸福的故事</div>    <div id="a5">这是一个狗血的故事</div></div><footer>    <div style="height: 900px;width: 100%">底部</div></footer></body><script src="jquery-1.11.3.js"></script><script>    var daohang=$("#LouDao");//楼层标签    var li=$("#LouDao>li");//获取目录li    var main=$("#main>div");//文章主要内容    $(window).scroll(function() {        //获取到页面总高度        var HeightAll = $("html,body").height();        //获取滚动条位置        var iTop = $(window).scrollTop();        for(var i=0;i<main.length;i++){            //楼层的显示和隐藏            if(iTop>=main[0].offsetTop){                daohang.show();            }else{                daohang.hide();            };            //楼层的联动            var num=0            for(var i=0;i<main.length;i++){                if(iTop>=main[i].offsetTop){                    num=i;                }                li[i].className='';//设置li中的class为空            };            li[num].className='active';            for(var i=0;i<li.length;i++){                li[i].onclick=function(){                    for(var j=0;j<li.length;j++){                        if(this==li[j]){                            $("html,body").animate({scrollTop:main[j].offsetTop},500);                        }                    }                }            }        }    })    function delay(obj){        var l=0;        var t=0;        while(obj){            l=l+obj.offsetLeft;            t=t+obj.offsetTop;            obj=obj.offsetParent;        }        return{left:l,top:t};    }//   new delay();//    console.log(delay(daohang).top);</script></html>
0 0