Sticktop

顾名思义，当元素靠近顶部时，自动固定在顶部。

常用场景
1.导航栏
2.字母列表

要实现导航吸顶效果，监听 scroll，然后设置导航的position：fixed

有一种属性：position:sticky

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type"  charset="utf-8"/>
        <title>Stickytop</title>
        <style>
        .box{
        position:-webkit-sticky;
        position:sticky;
        width:100%;
        height:30px;
        text-align:center;
        color:#fff;
        margin-bottom:50px;
        }
        .box1{
        top:0;
        z-index:1;
        background:#007bff;
        }
        .box2{
        top:30px;
        z-index:1;
        background:#ffc107;
        }
        .box3{
         background: #f4516c;
        }
        </style>
    </head>
    <body>
        <div style="height:500px">scroll</div>
        <div class="box box1"></div>
        <div class="box box2"></div>
        <div class="box box3"></div>
        <div style="height:500px"></div>
    </body>

</html>

注意，由于top值不同，表现得也不同
box1，box2，box3在滚动之前，他们与相对定位一样
但是box1的top为0，就固定在顶部，box2的top为30，就在top30的地方固定，box3没有设置，就一直是相对定位

所以，理解“粘粘定位是相对定位和固定定位的混合，元素在跨越固定阈值之前为相对定位，之后为固定定位，这个固定阈值就是top，也可以是right，left

值得注意的是

粘性定位的固定固定不一定是position:fixed，只要目标元素的任意父元素都没有设置position:relative,absolute,fixed, sticky的情况下，才与position：fixed表现一样

还需要考虑兼容性。sticky的兼容性不是很好。
接下来，用js来实现

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type"  charset="utf-8"/>
        <title>Stickytop-onscroll</title>
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                height:2000px;
                background-image:linear-gradient(-180deg, #15f09d 0%, #25A0FF 50%, #fca72b 100%);
            }
            #wrap{
                background-color:rgba(0,0,0,0.2);
                width:100%;
                height:100px;
                margin-top：100;
            }
            #wrap[data-fixed="fixed"]{
                position:fixed;
                top:0;
                left:0;
                margin:0;
            }
        </style>
    </head>
    <body>
        <div id="wrap"></div>
        <script>
            var obj =document.getElementById("wrap");
            var ot = obj.offsetTop;
            document.onscroll= function (){
                var st = document.body.scrollTop || document.documentElement.scrollTop;
                obj.setAttribute("data-fixed",st>ot?"fixed":"")
            }

        </script>
    </body>

</html>

offsetTop属性偏移量：元素相对于定位父级顶部内框的距离

css中[]选择器，#wrap[data-fixed=”fixed”],选择data-fixed属性值为fixed

获取当前页面滚动条纵坐标的位置：document.body.scrollTop||document.documentElement.scrollTop

获取当前页面滚动条横坐标的位置：document.body.scrollLeft||document.documentElement.scrollLeft