【前端案例】17 - 案例：仿淘宝固定右侧侧边栏

1. 原先侧边栏是绝对定位；

2. 当页面滚动到一定位置，侧边栏改为固定定位；

3. 页面继续滚动，会让返回顶部显示出来。

案例分析:

1. 需要用到页面滚动事件scroll 因为是页面滚动，所以事件源是document；

2. 滚动到某个位置，就是判断页面被卷去的上部值；

3. 页面被卷去的头部：可以通过window.pageYOffset获得 如果是被卷去的左侧window.pageXOffset；

4. 注意，元素被卷去的头部是element.scrollTop , 如果是页面被卷去的头部 则是 window.pageYOffset；

5. 其实这个值 可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了。

淘宝侧边栏案例

 * {
      padding: 0;
      margin: 0;
    }

    .fontStyle {
      font-size: 25px;
      text-align: center;
      font-weight: 700;
    }

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

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

    .banner {
      height: 220px;
      line-height: 220px;
      background-color: honeydew;
    }

    .main {
      height: 1200px;
      line-height: 1200px;
      background-color: seashell;
    }

    /* 侧边栏的编写 */
    .slider_bar {
      position: absolute;
      left: 50%;
      top: 300px;
      margin-left: 650px;
      width: 45px;
      height: 130px;
      background-color: deepskyblue;
    }

    .goBack {
      position: absolute;
      display: none;
      bottom: 0;
    }

  
返回顶部


头部区域
banner区域
主体区域

/**
   *   1. 事件源是document
   *
   *   2. 页面被卷去的头部 window.pageYOffset
   *
   *   3. 获取banner的offsetTop
   */
  let slider_bar = document.querySelector('.slider_bar');
  let banner = document.querySelector('.banner');
  let bannerTop = banner.offsetTop;
  let goBack = document.querySelector('.goBack');
  let sliderBarTop = (slider_bar.offsetTop - bannerTop);
  let main = document.querySelector('.main');
  let mainTop = main.offsetTop;
  // 页面滚动事件
  // document.documentElement 获取的是页面的根元素 html
  document.addEventListener('scroll', function () {
    // 页面滚动事件
    // console.log('666');
    // 获取当前页面距离顶部的距离
    // if ()
    if (pageYOffset >= bannerTop) {
      // 将 goBack 设置为固定定位
      slider_bar.style.position = 'fixed';
      // 避免跳动
      slider_bar.style.top = sliderBarTop + 'px';
    } else {
      slider_bar.style.position = 'absolute';
      slider_bar.style.top = '300px';
    }
    // 当页面滚动到main主体部分显示返回顶部
    // pageYOffset 有严重的兼容性问题
    if (pageYOffset >= mainTop) {
      goBack.style.display = 'block';
    } else {
      goBack.style.display = 'none';
    }
  });