楼梯导航

港控/mmm° 2023-02-23 03:53 53阅读 0赞

# html部分 #

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
      <style>
        *{ 
          margin: 0;
          padding: 0;
        }
        ul,li { 
          list-style: none;
        }
        .top { 
          width: 1200px;
          height: 1200px;
          border: 2px solid #f00;
          margin: 0 auto;
        }
        .floor { 
          width: 1200px;
          height: 400px;
          border: 1px solid #000;
          margin: 20px auto;
        }
        .left-nav { 
          display: none;
          position: fixed;
          left: 100px;
          bottom: 100px;
          width: 100px;
          border: 1px solid #000;
        }
        .left-nav li { 
          width: 80px;
          height: 60px;
          background-color: #eee;
          margin: 10px;
        }
        .left-nav li.active{ 
          background-color: #f00;
        }
        .footer { 
          width: 1200px;
          height: 1000px;
          border: 1px solid #000;
          margin: 0 auto;
        }
      </style>
    </head>
    <body>
        
        <div class="top">
           top
        </div>
        
        <div class="book floor">
          book
        </div>
        <div class="car floor">
          car
        </div>
        <div class="elec floor">
          elec
        </div>
        <div class="phone floor">
          phone
        </div>
        <div class="computer floor">
          computer
        </div>
        <div class="footer">
          footer
        </div>
        
        <div class="left-nav">
          <ul>
            <li class="active">book</li>
            <li>car</li>
            <li>elec</li>
            <li>phone</li>
            <li>computer</li>
          </ul>
        </div>
        <script src="../../JS/jquery-3.4.1.min.js"></script>
        <script src="./ele.js"></script>
    </body>
    </html>

# js部分 #

// 声明一个空数组用来存每个楼梯的高度值
    let arr = [];
    function gettopArr(){ 
        $('.floor').each(function(){ 
            arr.push($(this).offset().top)
        })
    }
    // 左边导航样式，先获取窗口的卷起高度,当高度大于头部高度时让左边的导航显示，否则隐藏
    function leftNavStyle(){ 
        let scrollTop = $(window).scrollTop();
        if(scrollTop >= 500){ 
            $('.left-nav').show()
        }else{ 
            $('.left-nav').hide()
        }
    }
    // 窗口滚动时执行左边导航样式方法和滚动时让导航位置和右边楼梯位置相对应的方法
    $(window).scroll(function(){ 
        leftNavStyle();
        scrollPage();
    })
    // 点击楼梯导航让楼团体跳转到相应位置，声明一个index记录点击的是第几个，点击时关闭窗口滚动，给html，body添加样式：卷起高度为当前点击楼梯导航索引值对应楼梯高度，并给这个导航添加样式其余的移除样式
    function nav(){ 
        $('.left-nav li').click(function(){ 
            let index = $(this).index();
            $(window).off("scroll");
            $('html,body').animate({ 
                scrollTop:arr[index]
            })
            $(this).addClass('active').siblings().removeClass('active')
        })
    }
    //页面滚动时让导航和楼梯对应，声明一个不变量记录窗口被卷起的高度，再声明一个变量cur用来记录导航索引，被卷起高度小于arr[0]也就是小于第一层楼梯开始高度时导航索引为0，否则循环遍历数组，高度大于等于这个数组小于等于这个数组+1时让导航等于i，终止所在层的循环。此时会出现一个问题：最后一个楼梯不会被遍历，因为他没有arr[i+1],再声明一个flag=true，当他循环到最后一个数组索引值时让导航索引值为arr.length-1也就是5-1=4
    function scrollPage(){ 
        let scrollTop = $(window).scrollTop();
        let cur;
        let flag = true;
        if(scrollTop < arr[0]){ 
            cur = 0;
        }else{ 
            for(let i = 0;i<arr.length;i++){ 
                if(scrollTop >= arr[i] && scrollTop < arr[i+1]){ 
                    cur = i;
                    flag = false;
                    break;
                }
            }
            if(flag){ 
                cur = arr.length - 1;
            }
        }
        $('.left-nav li').eq(cur).addClass('active').siblings().removeClass('active');
    }
    gettopArr();
    nav();

要引入jq