position: sticky;实现banner吸顶功能

原创声明

本文系作者辛苦码字所得，欢迎分享和转载，但请在明显位置注明作者的如下信息：
笔名：来碗鸡蛋面
主页：https://www.jianshu.com/u/4876275b5a73
邮箱：[email protected]
CSDN ID：tom_wong666

需求：

实现banner吸顶功能，即nav，bannner，content上下三栏布局页面上，向上滚动过程中：
1，nav会消失逐渐；
2，banner会逐渐向上移动，直到贴到body顶部然后固定在body顶部；
3,content会向上走并逐渐被隐藏；

分析：

1，js+css实现：nav static定位， banner absolute定位(加top等于nav高度)， content static定位(加margin-top 等于banner高度)，依据body的scrollTop值动态调整banner absolute定位的top值；这样做，缺点是逻辑复杂，设备资源消耗大，以及页面容易抖动。
2，css实现：position: sticky;可以规避以上缺点；缺点是IE不兼容，不过亲测Edge是支持的，毕竟Edge已经拥抱Chromium了。

position: sticky说明--参阅MDN解释如下：

// 粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。例如：

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

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

须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

代码示例：

    
      
    
    
      
nav
      
banner
        

        向上滚动过程中：1，nav会消失逐渐；2，banner会逐渐向上移动，直到贴到body顶部然后固定在body顶部；3,content会向上走并逐渐被隐藏；
      
      
content1
      
content2
      
content3
      
content4
      
content5
      
content6
      
content7
      
content8
      
content9
      
content10
      
content11
      
content12