css和javascript让导航跟随窗口一起滚动

制作前端页面效果的时候我们经常需要导航一直紧贴浏览器上面窗口,这样可以让我们下拉到哪里都可以随时看到导航菜单并点击,今天这里给大家两种实现的方法

1.css实现

01.
.nav{width:100%;height:36px;position: fixed;z-index:99999;}

直接使用position属性,值设置为fixed,这样导航就能一直紧贴窗口上面,z-index是防止其他层遮挡而设置的非常大

2.javasciprt实现

01.
<script>
02.
$(window).scroll(function(){
03.
var Ntop = $(".nav").offset().top;
04.
var Htop = $(window).scrollTop();
05.
if(Htop > Ntop){
06.
$(".nav").addClass("on");
07.
}else{
08.
$(".nav").removeClass("on");
09.
}
10.
})
11.
</script>

还需要添加一条class选择器来附加效果

01.
.on{
02.
position:fixed;
03.
top:0;
04.
}


内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://sulao.cn/post/111

评论列表