js 吸顶实现

效果：

第一种实现：使用DOM

主要思路是根据实时监听滚动条被向下拉动的距离，当其距离顶端小于某一值时使用position: fixed 固定。

核心代码

  //获取距离页面顶端的距离
        let titleTop = tit.offsetTop;
        //滚动事件
        document.onscroll = function(){
                //获取当前滚动的距离
                let btop = document.body.scrollTop||document.documentElement.scrollTop;
                //如果滚动距离大于导航条据顶部的距离
                if(titleTop - btop < 60){
                        //为导航条设置fix
                        tit.class = "fix"; //这里根据不同的类名设置不同的样式
                     }else if (titleTop - btop > 60) {
                        //移除fixed
                        tit.class = "";
                     }
             }

完整代码

第二种 使用position:sticky

使用position:sticky只需要设置top值就可以在滚动到相应值时固定，用法简单但要注意

其兼容性：position:sticky  这里看到某些浏览器不支持此属性值需要自己做兼容，另外chrome和safari需要是使用position:-webkit-sticky 。

粘性定位是相对于（BFC）和 最近的块先元素定位，所以部分情况不适用

MDN中解释