js 吸顶实现

效果：

第一种实现：使用DOM

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

核心代码

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

完整代码

第二种 使用position:sticky

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

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

MDN中解释