实现导航栏固定在顶部（吸顶效果），滚动页面万能方式
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')
}
})本文网址：https://www.dedexuexi.com/wysj/html/3445.html
本站部分文章搜集与网络，如有侵权请联系本站，转载请说明出处。
标签：导航
