楼层导航

标签：index bg top list li 楼层 div 导航

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{ 
                margin: 0; 
                padding: 0;
            }
            .list_li{ 
                position: fixed; 
                left: 20px; 
                top: 50%;
                list-style: none;
            }
            .list_li li{ 
                width: 20px; 
                height: 20px; 
                border: 1px solid red; 
                cursor: pointer;
            }
            .li_bg{
                background-color:blue;
            }
        </style>
        <!-- 百度 CDN 引入jquery -->
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    <body>
        <div class="head" style="height: 400px; width: 800px; margin: 0 auto; background: red;">一楼</div>
        <div class="head2" style="height: 200px; width: 800px; margin: 0 auto; background: blue;">二楼</div>
        <div style="height: 300px; width: 800px; margin: 0 auto; background: pink;">三楼</div>
        <div style="height: 500px; width: 800px; margin: 0 auto; background: green;">四楼</div>
        <div style="height: 100px; width: 800px; margin: 0 auto; background: blueviolet;">五楼</div>
        <div style="height: 700px; width: 800px; margin: 0 auto; background: orange;">六楼</div>
        <div style="height: 300px; width: 800px; margin: 0 auto; background: palegreen;">七楼</div>
        <div style="height: 900px; width: 800px; margin: 0 auto; background: saddlebrown;">八楼</div>
        <div style="height: 1200px; width: 800px; margin: 0 auto;background: darkblue;">九楼</div>
         
        <ul class="list_li">
            <li>1F</li>
            <li>2F</li>
            <li>3F</li>
            <li>4F</li>
            <li>5F</li>
            <li>6F</li>
            <li>7F</li>
            <li>8F</li>
            <li>9F</li>
        </ul>
    </body>
    <script>
            $(".list_li").hide();//先让li列表隐藏
            var headTop =$(".head").outerHeight() ;//获取1楼的高度
            $(window).scroll(function(){
                if( $(window).scrollTop() >= headTop  )//判断如果滚动的高度大于1楼的高度 li列表显示
                {
                    $(".list_li").show(500);
                }else{
                    $(".list_li").hide(500);
                }
                var scroll_top=window.scrollY;
                $("div").each(function(div_index,div_item){
                    if(scroll_top>$(this).offset().top-1){
                        $("li").removeClass("li_bg");
                        $("li").eq(div_index).addClass("li_bg");
                    };
                });
            })
             
            //跳楼
            $("li").click(function(){
                var index = $(this).index();//取到对应li的下标
                var oTop = $("div").eq(index).offset().top;//每个对应div 距离顶部的高度
                $("html").animate({"scrollTop":oTop},1000)//控制body滚动动画
                $(this).siblings().removeClass("li_bg");
                $(this).addClass("li_bg")
                // var that=this;
                // setTimeout(function(){
                //     $(that).addClass("li_bg")
                // },0)
            })
    </script>
</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .list_li{ position: fixed; left: 20px; top: 50%; list-style: none; } .list_li li{ width: 20px; height: 20px; border: 1px solid red; cursor: pointer; } .li_bg{ background-color:blue; } </style> <script type="text/javascript" src="https://metrix.sh.intel.com/sqe/js/jquery.min.js"></script> </head> <body> <div class="head" style="height: 400px; width: 800px; margin: 0 auto; background: red;">一楼</div> <div class="head2" style="height: 200px; width: 800px; margin: 0 auto; background: blue;">二楼</div> <div style="height: 300px; width: 800px; margin: 0 auto; background: pink;">三楼</div> <div style="height: 500px; width: 800px; margin: 0 auto; background: green;">四楼</div> <div style="height: 100px; width: 800px; margin: 0 auto; background: blueviolet;">五楼</div> <div style="height: 700px; width: 800px; margin: 0 auto; background: orange;">六楼</div> <div style="height: 300px; width: 800px; margin: 0 auto; background: palegreen;">七楼</div> <div style="height: 900px; width: 800px; margin: 0 auto; background: saddlebrown;">八楼</div> <div style="height: 1200px; width: 800px; margin: 0 auto;background: darkblue;">九楼</div> <ul class="list_li"> <li>1F</li> <li>2F</li> <li>3F</li> <li>4F</li> <li>5F</li> <li>6F</li> <li>7F</li> <li>8F</li> <li>9F</li> </ul> </body> <script> $(".list_li").hide();//先让li列表隐藏 var headTop =$(".head").outerHeight() ;//获取1楼的高度 $(window).scroll(function(){ if( $(window).scrollTop() >= headTop )//判断如果滚动的高度大于1楼的高度 li列表显示 { $(".list_li").show(500); }else{ $(".list_li").hide(500); } var scroll_top=window.scrollY; $("div").each(function(div_index,div_item){ if(scroll_top>$(this).offset().top-1){ $("li").removeClass("li_bg"); $("li").eq(div_index).addClass("li_bg"); }; }); }) //跳楼 $("li").click(function(){ var index = $(this).index();//取到对应li的下标 var oTop = $("div").eq(index).offset().top;//每个对应div 距离顶部的高度 $("html").animate({"scrollTop":oTop},1000)//控制body滚动动画 $(this).siblings().removeClass("li_bg"); $(this).addClass("li_bg") // var that=this; // setTimeout(function(){ // $(that).addClass("li_bg") // },0) }) </script> </html>

标签：index,bg,top,list,li,楼层,div,导航
From： https://www.cnblogs.com/zhaofen/p/17105589.html

相关文章

赞助商

阅读排行