楼层导航

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

posted @ 2023-02-09 15:54 芬-mi 阅读(24) 评论(0) 收藏举报

刷新页面返回顶部

zf

楼层导航

公告