建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!
当前位置:建站学习网 > 网页设计 > 脚本HTML教程 >

实现导航栏固定在顶部(吸顶效果),滚动页面万能方式

整理编辑:建站学习网 更新时间:2022-07-17 阅读:0

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

关键词:导航