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

最新推荐文章于 2021-09-08 19:52:50 发布

最新推荐文章于 2021-09-08 19:52:50 发布 · 414 阅读

文章标签：

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

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一种使用jQuery实现的固定导航栏效果。当页面滚动到特定位置时，导航栏会固定在顶部，并且在继续向下滚动时隐藏，向上滚动时重新出现。此效果适用于宽度大于980像素的屏幕，提供了良好的用户体验。

<!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>

效果图：