jquery 楼梯导航

最新推荐文章于 2022-08-30 12:23:26 发布

昨夜太平长安888

最新推荐文章于 2022-08-30 12:23:26 发布

阅读量539

点赞数

分类专栏： JQurey 文章标签： jquery 楼梯导航

本文链接：https://blog.csdn.net/HelloWord176/article/details/103689481

版权

JQurey 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!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>楼梯导航</title>
    <script src="../jquery.min.js"></script>
    <style>
        * {
          margin: 0;
          padding: 0;
        }
    
        li {
          height: 700px;
          text-align: center;
          line-height: 700px;
          font-size: 200px;
          color: #fff;
          list-style: none;
        }
    
        dl {
          position: fixed;
          bottom: 100px;
          right: 10px;
          
          /* display: none; */
        }
    
        dd {
          width: 50px;
          line-height: 50px;
          text-align: center;
          border: 1px solid #000;
          background-color: #fff;
          border-radius: 15px;
          margin: 5px 0;
        }
        dd:hover{
            cursor: pointer;
        }
    
        .action {
          background-color: black;
          color: #fff;
        }
      </style>
</head>
<body>
    <div id="box">
        <ul>
          <li style="background-color: rgb(255, 38, 0);">01</li>
          <li style="background-color: rgb(255, 166, 0);">02</li>
          <li style="background-color: rgb(229, 255, 0);">03</li>
          <li style="background-color: rgb(55, 228, 2);">04</li>
          <li style="background-color: aqua;">05</li>
          <li style="background-color: rgb(0, 119, 255);">06</li>
          <li style="background-color: rgb(112, 89, 185);">07</li>
        </ul>
      </div>
      <dl>
        <dd class="action">1</dd>
        <dd>2</dd>
        <dd>3</dd>
        <dd>4</dd>
        <dd>5</dd>
        <dd>6</dd>
        <dd>7</dd>
      </dl>
      <script>
          var bool = true;  //全局声明一个变量用来解决点击dd标签的时候 也会出现滑动的效果
          
          $(window).scroll(function(){  // 当窗口滚动的时候
                if(bool){  
                    for(var i = 0; i < $("li").length; i++){  //循环遍历li的数量
                        if($("li").eq(i).offset().top - $(window).scrollTop() <= 100){  // 如果其中某个li距离文档（当前视口）顶部的距离  减去  整个window窗口顶部滚动的距离小于或者等于 100的时候； 这个100可以根据自己的情况而定
                            $("dd").eq(i).addClass("action").siblings().removeClass("action");  // 右边的其中某个（和上面的li的索引值是相等的） dd 添加类名为 action 这个样式，其他的 则删除这个样式 
                        }
                    }    
                    if($(window).scrollTop() + $(window).height() >= $("html").height() - 150){  // 如果整个窗口的滚动高度 + 当前窗口的高度 >= 整个文档的高度 - 150的时候（这个150也是根据自己的情况而定的）
                        $("dd").last().addClass("action").siblings().removeClass("action"); // 为右边最后一个dd 添加active这个样式，其他的dd删除这个样式
                    }
                    
                }
          })
        //   2. 当右边的dd点击的时候，滚动到对应索引的li
          $("dd").click(function(){ // 当右边dd点击的时候
              bool = false;
              var i = $(this).index();
              var h = $("li").eq(i).offset().top;
              $("html").animate({scrollTop : h},800,function(){
                  bool = true;
              });
              $(this).addClass("action").siblings().removeClass("action");
          })
      </script>
</body>
</html>