CSS电梯导航+JS导航高亮原生JS利用scroll和offset家族实现电商电梯导航 CSS电梯导航 a标签利用hr

原生JS利用scroll和offset家族实现电商电梯导航

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>复习页面滚动</title>
    <style>
      .box {
        width: 60%;
        height: 700px;
        margin: 50px auto;
      }
      .one {
        background-color: olive;
      }
      .two {
        background-color: hotpink;
      }
      .three {
        background-color: orangered;
      }
      .four {
        background-color: khaki;
      }
      a {
        display: block;
        width: 50px;
        height: 50px;
        text-align: center;
      }
      .orange {
        background-color: orangered;
      }
      .sidebar {
        position: fixed;
        bottom: 20px;
        right: 10px;
      }
      /* 点击滑动的核心样式属性 */
      html {
        scroll-behavior: smooth;
      }
    </style>
  </head>
  <body>
    <div id="one" class="box one">1</div>
    <div id="two" class="box two">2</div>
    <div id="three" class="box three">3</div>
    <div id="four" class="box four">4</div>

    <div class="sidebar">
      <a href="#one" class="side1 orange">1</a>
      <a href="#two" class="side2 orange">2</a>
      <a href="#three" class="side3 orange">3</a>
      <a href="#four" class="side4 orange">4</a>
    </div>

    <script>
      myScroll();
      function myScroll() {
        const aone = document.querySelector('.side1');
        const atwo = document.querySelector('.side2');
        const athree = document.querySelector('.side3');
        const afour = document.querySelector('.side4');

        const domList = document.querySelectorAll('a');

        // -100是为了让楼层计算模糊
        const top1 = document.querySelector('#one').offsetTop - 100;
        const top2 = document.querySelector('#two').offsetTop - 100;
        const top3 = document.querySelector('#three').offsetTop - 100;
        const top4 = document.querySelector('#four').offsetTop - 100;

        // 监听页面滚动，将楼层offsetTop与页面scrollTop比较，页面卷边大于各楼层上边框与窗口顶部的距离，则表示到达此楼层
        document.addEventListener('scroll', function (e) {
          var windowTop = document.documentElement.scrollTop;
          // 注意楼层判断顺序——倒序，否则到了第一层就会停止判断
          if (windowTop >= top4) {
            const idx = 3;
            for (let index = 0; index < domList.length; index++) {
              domList[index].style.backgroundColor = 'orangered';
            }
            afour.style.backgroundColor = '#fff';
          } else if (windowTop >= top3) {
            const idx = 2;
            for (let index = 0; index < domList.length; index++) {
              domList[index].style.backgroundColor = 'orangered';
            }
            athree.style.backgroundColor = '#fff';
          } else if (windowTop >= top2) {
            const idx = 1;
            for (let index = 0; index < domList.length; index++) {
              domList[index].style.backgroundColor = 'orangered';
            }
            atwo.style.backgroundColor = '#fff';
          } else if (windowTop >= top1) {
            const idx = 0;
            for (let index = 0; index < domList.length; index++) {
              domList[index].style.backgroundColor = 'orangered';
            }
            aone.style.backgroundColor = '#fff';
          }
        });
      }
    </script>
  </body>
</html>