在给客户设计高端网站定制的时候,遇到客户想要实现网页导航栏相对固定在页面顶部的效果。
在经过一番查询和测试后,终于实现了,下面是实现代码和流程。
1、编写css样式。代码如下:
.xhhnav{
position: relative;
height: 88px;
width: 100%;
z-index: 999;
}
.xhhnav-active{
position: fixed;
top: 0;
}
在这里,做下解释哈。xhhnav中间的高度是可以取消或者修改的。z-index: 999;也是可以变动的,唯一不能变动的是 position: relative;xhhnav-active这个类里面position: fixed;不能变。
2、js代码,如下:
window.addEventListener('scroll', function(){
let t = $('body, html').scrollTop(); // 目前监听的是整个body的滚动条距离
if(t>0){
$('.xhhnav').addClass('xhhnav-active')
}else{
$('.xhhnav').removeClass('xhhnav-active')
}
})
解释:这段js代码也是可以不要的,做过测试,前提是网页中本身没有调用过scroll。