jq实现的楼层效果

最新推荐文章于 2021-12-06 10:07:43 发布

原创最新推荐文章于 2021-12-06 10:07:43 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#仿京东淘宝楼层效果jq实现的楼层效果完整

这篇博客演示了如何使用jQuery创建一个楼层导航效果。通过监听滚动事件，实现了当滚动条到达特定位置时，对应的楼层目录高亮显示。同时，点击目录可以平滑滚动到相应的内容区域。示例代码包括HTML、CSS和JavaScript部分，适用于网页交互设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


<!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>