189 8069 5689
创新互联在给客户设计高端网站定制的时候，遇到客户想要实现网页导航栏相对固定在页面顶部的效果。
创新互联建站-专业网站定制、快速模板网站建设、高性价比绥滨网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式绥滨网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖绥滨地区。费用合理售后完善，十余年实体公司更值得信赖。
在经过一番查询和测试后，终于实现了，下面是实现代码和流程。
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。