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

33次阅读

共计 510 个字符，预计需要花费 2 分钟才能阅读完成。

利用 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')
    }
 })

正文完