如何实现导航栏固定在顶部（吸顶效果）

创新互联在给客户设计高端网站定制的时候，遇到客户想要实现网页导航栏相对固定在页面顶部的效果。

创新互联建站-专业网站定制、快速模板网站建设、高性价比绥滨网站开发、企业建站全套包干低至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。

网站标题：如何实现导航栏固定在顶部（吸顶效果）
分享路径：http://6mz.cn/article/scdegh.html