在线咨询
微信咨询
服务热线
服务热线:15639912513
TOP
当前位置:
首页 > 新闻中心> 前端设计>如何实现导航栏固定在顶部(吸顶效果)

如何实现导航栏固定在顶部(吸顶效果)

发布时间:2019-08-02 浏览:5098次

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

在经过一番查询和测试后,终于实现了,下面是实现代码和流程。

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。


TAG
5098
该内容对我有帮助