仿淘宝固定侧边栏

Tutorial: DOM实战 Category: JS Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0 
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .slider-bar {
        position: absolute;
        left: 50%;
        top: 300px;
        margin-left: 600px;
        width: 45px;
        height: 130px;
        background-color: pink;
      }

      .w {
        width: 1200px;
        margin: 10px auto;
      }

      .header {
        height: 150px;
        background-color: purple;
      }

      .banner {
        height: 250px;
        background-color: skyblue;
      }

      .main {
        height: 1500px;
        background-color: yellowgreen;
      }

      span {
        display: none;
        position: absolute;
        bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="slider-bar">
      <span class="goBack">返回顶部</span>
    </div>

    <div class="header w">头部区域</div>

    <div class="banner w">banner区域</div>

    <div class="main w">主体部分</div>

    <script>
      //1. 获取元素
      var sliderbar = document.querySelector(".slider-bar");
      var banner = document.querySelector(".banner");

      // banner.offestTop 顶部到banner上边框的总距离
      // 规定：页面滚动卷去的部位在这里, sliderbar要改成绝对定位
      var bannerTop = banner.offsetTop;
      console.log(bannerTop); // 150 + 10 + 10

      // 当我们侧边栏固定定位之后应该变化的数值
      // 页面上滚动, 卷去bannerTop=170, 那sliderbar.offsetTop=300卷去170=130
      // 就是滚动后sliderbar.offsetTop最终的位置
      var sliderbarTop = sliderbar.offsetTop - bannerTop;
      console.log(sliderbarTop); // 300 - 170 = 130

      // 获取main 主体元素
      var main = document.querySelector(".main");
      var goBack = document.querySelector(".goBack");
      var mainTop = main.offsetTop;
      console.log(mainTop); // 170 + 250 + 10 = 430

      // 2. 页面滚动事件 scroll
      document.addEventListener("scroll", function () {
        // window.pageYOffset 页面被卷去的头部
        // console.log(window.pageYOffset);

        // 3 .当我们页面被卷去的头部大于等于了 170 此时 侧边栏就要改为固定定位
        if (window.pageYOffset >= bannerTop) {
          sliderbar.style.position = "fixed";
          sliderbar.style.top = sliderbarTop + "px"; // 130
        } else {
          sliderbar.style.position = "absolute";
          sliderbar.style.top = "300px";
        }

        // 4. 当我们页面滚动到main盒子, 就显示 goback模块
        // 就是规定,mainTop被卷完, 开始卷自己的时候, 显示模块
        if (window.pageYOffset >= mainTop) {
          goBack.style.display = "block";
        } else {
          goBack.style.display = "none";
        }
      });

      var bd = document.body;
      var docu = document.documentElement;
      goBack.addEventListener("click", function () {
        console.log(111, main.offsetTop); // 430 不会变
        console.log(222, bd.scrollTop); // 0
        console.log(333, docu.scrollTop); // 与下面一致, 滚动变化
        console.log(444, window.pageYOffset); // // 与上面一致, 滚动变化

        // 方法1
        window.scrollTo(0, 0);

        // 方法2
        // window.scrollBy(0, -window.pageYOffset);
      });
    </script>
  </body>
</html>
Prev: scroll系列 Next: mouseenter和mouseover的区别