14.仿京东右侧边导航栏

Posted 2021-01-13 alex-xxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了14.仿京东右侧边导航栏相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.3.1.js"></script>
    <style>
        *{
            margin:0;padding:0;
        }
        ul{list-style: none;}
        .top,.f1,.f2,.f3,.f4,.f5,.f6,.f7,.f8,.bottom{
            width: 1210px;
            margin: 0 auto;
        }
        .subnav{
            display: none;
            position: fixed;
            top: 150px;
            right: 10px;
            width: 38px;
            height: 360px;
        }
        .subnav li{
            height: 36px;
            border: 1px solid #DEDEDE;
            margin-bottom: 5px;
            font-size: 0;
            background: url("bg.png") no-repeat;
        }
        .subnav li:hover,.subnav li.current,.subnav div{
            border: 1px solid #ED5759;
            background: #FDEEEE;
            padding-left: 6px;
            padding-top: 2px;
            height: 34px;
            cursor: pointer;
            color: #ED5759;
            font-size: 12px;
        }
        .subnav div{
            padding-top: 10px;
            height: 26px;
        }
    </style>
    <script>
        $(function () {
            var num=0; var top=0;
            var arr = ["家电通讯", "电脑数码", "服饰鞋包", "美容珠宝", "居家生活", "母婴玩具", "食品保健", "图书音像"]
            $("<ul></ul>").insertBefore($(".back"));
            for(var i=0;i<arr.length;i++){
                $(".subnav ul").append("<li></li>");
            }
            $(".subnav li").each(function (index,ele) {
                $(ele).html(arr[index]);
                num = index*55;
                $(ele).css("background-position","0 -"+num+"px");
            })

            //鼠标滚动
            $(window).scroll(function () {
                top = $(document).scrollTop()+50;
                if(top>=$(".f8").offset().top){
                    $(".subnav li:eq(7)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f7").offset().top){
                    $(".subnav li:eq(6)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f6").offset().top){
                    $(".subnav li:eq(5)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f5").offset().top){
                    $(".subnav li:eq(4)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f4").offset().top){
                    $(".subnav li:eq(3)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f3").offset().top){
                    $(".subnav li:eq(2)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f2").offset().top){
                    $(".subnav li:eq(1)").addClass("current").siblings().removeClass();
                }else if(top>=$(".f1").offset().top){
                    $(".subnav li:eq(0)").addClass("current").siblings().removeClass();
                } else if(top>50){
                    $(".subnav").fadeIn();
                } else {
                    $(".subnav").fadeOut();
                }
            })

            //鼠标点击右侧导航栏时
            $(".subnav li").click(function () {
                $("html,body").stop().animate({
                    // 给具有相同效果的元素添加 共同的样式 jd
                    "scrollTop" : $(".jd").eq($(this).index()).offset().top
                },1000);
            });
            //点击返回
            $(".back").click(function () {
                $("html,body").animate({"scrollTop":0},300);
            });

        })
    </script>
</head>
<body>
<div class="top">
    <img src="top.png" alt="" />
</div>
<div class="jd f1">
    <img src="f1.png" alt="" />
</div>
<div class="jd f2">
    <img src="f2.png" alt="" />
</div>
<div class="jd f3">
    <img src="f3.png" alt="" />
</div>
<div class="jd f4">
    <img src="f4.png" alt="" />
</div>
<div class="jd f5">
    <img src="f5.png" alt="" />
</div>
<div class="jd f6">
    <img src="f6.png" alt="" />
</div>
<div class="jd f7">
    <img src="f7.png" alt="" />
</div>
<div class="jd f8">
    <img src="f8.png" alt="" />
</div>
<div class="bottom">
    <img src="bottom.png" alt="" />
</div>
<div class="subnav">
    <div class="back">返回</div>
</div>
</body>
</html>