利用position的sticky属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38788.html
position: sticky;
position: -webkit-sticky; // 兼容 -webkit 内核的浏览器
top: 10px; // 必须设一个值,否则不生效
万能方式处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38788.html
思路:前提时需要监听scroll事件
1)滚动条不动时,是静态相对定位状态relative
2)当页面滚动超出设置距离时,js改变样式属性 切换定位状态变成fixed,同时再给top设置一个值文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38788.html
css部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38788.html
// 滚动条不动时
.box{
position: relative;
height: 80px;
width: 100%;
z-index: 999;
}
// 监听到滚动条开始滚动后的样式
.box-active{
position: fixed;
top: 0;
}
js部分文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38788.html
// 监听事件
window.addEventListener('scroll', function(){
let t = $('body, html').scrollTop(); // 目前监听的是整个body的滚动条距离
if(t>0){
$('.box').addClass('box-active')
}else{
$('.box').removeClass('box-active')
}
})
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/38788.html