jQuery实现在鼠标滚动后导航栏保持固定

效果:鼠标向下滚动后,导航栏在屏幕上置顶固定。

下滚后,

 

HTML:


<div id="navi">
<ul id="nav">
<li><a href="home">首页</a></li>
<li><a href="life">走进航大</a></li>
<li><a href="direction">报考指南</a></li>
<li><a href="college">学院介绍</a></li>
<li><a href="type">招生类型</a></li>
</ul>
</div>


CSS:

.full{ position: fixed; top: 0;z-index: 10000; width:100%;background-color: #2778af;float:left;height:40px;}
.fixed{ position: fixed; top: 0; width: 1215px !important;left: 0;right:0; margin:auto !important; z-index: 10000; background-color: #2778af ;float:none !important; }


JQuery:


<script>
$(document).ready(function() {
var navOffset=$("#nav").offset().top;
$(window).scroll(function(){
var scrollPos=$(window).scrollTop();
if(scrollPos >=navOffset){
$("#nav").addClass("fixed");
$("#navi").addClass("full");
}else{
$("#nav").removeClass("fixed");
$("#navi").removeClass("full");
}
});

});
</script>

posted @ 2020-03-31 11:27  collin-liu  阅读(442)  评论(0编辑  收藏  举报