如何实现导航栏固定在顶部(吸顶效果)
创新互联在给客户设计高端网站定制的时候,遇到客户想要实现网页导航栏相对固定在页面顶部的效果。
创新互联建站-专业网站定制、快速模板网站建设、高性价比绥滨网站开发、企业建站全套包干低至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。
分享标题:如何实现导航栏固定在顶部(吸顶效果)
URL网址:http://scyanting.com/article/scdegh.html