JQ 判断鼠标向上滚动并浮动导航

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
<style>
.t-fnav ul{width:980px; margin:0 auto;}
.t-fnav ul li{display:inline-block; *display:inline; *zoom:1; margin:0 10px;}
.t-fnav ul li a{display:block; padding:5px 10px;}
.fix-nav{
	position: fixed;
	width:100%;
	top:-50px;
	-webkit-transition: top .5s;
	-moz-transition: top .5s;
	-o-transition: top .5s;
	transition: top .5s;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,.1);
	-moz-box-shadow: 0 2px 2px rgba(0,0,0,.1);
	box-shadow: 0 2px 2px rgba(0,0,0,.1);
}
.fix-nav-appear{top:0;}
</style>
</head>
<body>
<div id="fnav" class="t-fnav">
	<ul>
		<li><a href="###">导航一</a></li>
		<li><a href="###">导航二</a></li>
		<li><a href="###">导航三</a></li>
		<li><a href="###">导航四</a></li>
		<li><a href="###">导航五</a></li>
	</ul>
</div>
<div style="height: 3000px;"></div>
<script type="text/javascript">
$(function(){
	scrollfix();
});
function scrollfix(){
	var fnav = $('#fnav'), 
	t = fnav.offset().top, 
	h = fnav.outerHeight(),
	winTop1=0,
	winWidth=$(window).width(),
	holder=jQuery('<div>');
	$(window).on('scroll',function(){
		var winTop2 = $(window).scrollTop();
		holder.css('height',h);
		//开始浮动，不过不显示
		if(winTop2>t && winWidth>980){
			holder.show().insertBefore(fnav);
			fnav.addClass('fix-nav');
		}else{
			holder.hide();
			fnav.removeClass('fix-nav');
		}
		//判断鼠标向上滚动，显示出来
		if(winTop2>winTop1 && winWidth>980){
			fnav.removeClass('fix-nav-appear');
		}else if(winTop2<winTop1){
			fnav.addClass('fix-nav-appear');
		}
		winTop1 = $(window).scrollTop();
	})
}
</script>
</body>
</html>
效果图：
JQ 判断鼠标向上滚动并浮动导航

猜你喜欢
