文章 https://www.cnblogs.com/coco1s/p/6402723.html
    核心代码

    1. {
    2. position: -webkit-sticky;
    3. position: sticky;
    4. top: 0;
    5. }

    实现原理
    因为设定的阈值是 top:0 这个值表示当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于0px时,元素以relative定位表现,而当元素距离页面视口小于0px时,元素表现为fixed定位,也就会固定在顶部。

    距离页面顶部大于20px,表现为 position:relative;
    image.png

    距离页面顶部小于20px,表现为 position:fixed;

    image.png



    生效规则
    设定为 position:sticky 元素的任意父节点的overflow 属性必需是visible 否则position:sticky 不会生效
    如果position:sticky 元素的任意父节点定位设置为overflow:hidden 则父容器无法进行滚动,所以position:sticky 元素也不会有滚动然后固定的情况。
    如果position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed 则元素相对父元素进行定位,而不会相对viewprot 定位



    https://github.com/filamentgroup/fixed-sticky






    **