关于javascript:滚动页面实现导航栏固定在顶部吸顶效果

利用position的sticky属性

  position: sticky;  position: -webkit-sticky;    // 兼容 -webkit 内核的浏览器  top: 10px;                          // 必须设一个值，否则不失效

万能形式解决

思路：前提时须要监听scroll事件
1）滚动条不动时，是动态绝对定位状态relative
2）当页面滚动超出设置间隔时，js扭转款式属性 切换定位状态变成fixed，同时再给top设置一个值

css局部

// 滚动条不动时.box{position: relative;height: 80px;width: 100%;z-index: 999;}

// 监听到滚动条开始滚动后的款式.box-active{position: fixed;top: 0;}

js局部

// 监听事件 window.addEventListener('scroll', function(){     let t = $('body, html').scrollTop();   // 目前监听的是整个body的滚动条间隔     if(t>0){        $('.box').addClass('box-active')    }else{        $('.box').removeClass('box-active')    } })