吸顶效果用css3黏性布局有多好用，结果就有多......

以前的吸顶效果，需要监听滚动条滚动位置，然后在适当位置用到position的fixed固定定位，时代变啦，已经大部分浏览器兼容黏性布局啦

在 viewport 视口滚动到元素 top 距离小于 10px 之前，元素为相对定位。之后，元素将固定在与顶部距离 10px 的位置，直到 viewport 视口回滚到阈值以下。

粘性定位常用于定位字母列表的头部元素。标示 B 部分开始的头部元素在滚动 A 部分时，始终处于 A 的下方。而在开始滚动 B 部分时，B 的头部会固定在屏幕顶部，直到所有 B 的项均完成滚动后，才被 C 的头部替代。

MDN文档

position属性所有值的兼容性

直接的写法

在需要吸顶的div加上

position: sticky;
position: -webkit-sticky; // 兼容性图上带...的

那么问题来了，项目需求竟然要兼容IE，（啊，都什么年代了，巴拉巴拉的，一顿吐槽之后最终还是要解决唉唉） 竟然一开始没发现兼容性图上没有标IE，MDN已经放弃IE了吗？有没有懂的呀

好了收收收

sticky黏性布局是不可能放弃的，IE也不能放弃

那就只能通过判断浏览器有没有兼容sticky了

能兼容直接用

兼容的写法

    // 判断浏览器是否兼容sticky
    hasSticky() {
      const sticky = (function () {
        const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'];
        const vendorListLength = vendorList.length;
        const stickyElement = document.createElement('div');
        for (let i = 0; i < vendorListLength; i++) {
          stickyElement.style.position = vendorList[i] + 'sticky';
          if (stickyElement.style.position !== '') {
            return true;
          }
        }
        return false;
      })();
      return sticky;
    }

不兼容的话，只能使用传统方法，需要通过监听滚动条滚动距离，然后在用css的position: fixed固定定位

    if (!this.hasSticky()) {
      window.addEventListener('scroll', this.handleScroll);// 监听滚动条
    }