淘宝固定侧边栏.png

要求

1.原先侧边栏是绝对定位
2.当页面滚动到一定位置，侧边栏改为固定定位
3.页面继续滚动，会让返回顶部显示出来

案例分析

①需要用到页面滚动事件scroll，因为是页面滚动，所以事件源是document
②滚动到某个位置，就是判断页面被卷去的上部值。
③页面被卷去的头部：可以通过window.pageYOffset获得，如果是被卷去的左侧window.pageXOffset
④注意：元素被卷去的头部是element.scrollTop，如果是页面被卷去的头部则是window.pageYOffset

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>仿淘宝固定侧边栏</title>
  8.     <style>
  9.          .slider-bar {
  10.             position: absolute;
  11.             left: 50%;
  12.             top: 300px;
  13.             margin-left: 600px;
  14.             width: 45px;
  15.             height: 130px;
  16.             background-color: pink;
  17.         }
  19.         .w {
  20.             width: 1200px;
  21.             margin: 10px auto;
  22.         }
  24.         .header {
  25.             height: 150px;
  26.             background-color: purple;
  27.         }
  29.         .banner {
  30.             height: 250px;
  31.             background-color: skyblue;
  32.         }
  34.         .main {
  35.             height: 1000px;
  36.             background-color: yellowgreen;
  37.         }
  39.         span {
  40.             display: none;
  41.             position: absolute;
  42.             bottom: 0;
  43.         }
  44.     </style>
  45. </head>
  46. <body>
  47.     <div class="slider-bar">
  48.         <span class="goBack">返回顶部</span>
  49.     </div>
  50.     <div class="header w">头部区域</div>
  51.     <div class="banner w">banner区域</div>
  52.     <div class="main w">主体部分</div>
  54.     <script>
  55.         //获取元素
  56.         var sliderBar = document.querySelector('.slider-bar');
  57.         var banner = document.querySelector('.banner');
  58.         var main = document.querySelector('.main');
  59.         var goBack = document.querySelector('.goBack');
  60.         var bannerTop = banner.offsetTop;
  61.         var sliderBarTop = sliderBar.offsetTop - bannerTop;
  62.         var mainTop = main.offsetTop;
  63.         //页面滚动事件
  64.         document.addEventListener('scroll',function(){
  65.             //当页面卷去头部大于等于172时，侧边栏改为固定定位
  66.             if(window.pageYOffset >= bannerTop){
  67.                 sliderBar.style.position = 'fixed';
  68.                 sliderBar.style.top = sliderBarTop + 'px';
  69.             }else{
  70.                 sliderBar.style.position = 'absolute';
  71.                 sliderBar.style.top = '300px';
  72.             }
  73.             //判断何时显示返回顶部
  74.             if(window.pageYOffset >= mainTop){
  75.                 goBack.style.display = 'block';
  77.             }else{
  78.                 goBack.style.display = 'none';
  79.             }
  80.         });
  81.     </script>
  82. </body>
  83. </html>

.