JQ顶部导航根据滚动条滚动方向显示和隐藏

<div id="nav" class="nav-bar">顶部导航</div>   	
<div style="height: 3000px;"><!--该div用来撑开滚动条 演示--></div>

.nav-bar{
   			position: fixed;
   			top: 0;
   			left: 0;
   			right: 0;
   			text-align: center;
   			height: 50px;
   			line-height: 50px;
   			font-size: 20px;
   			padding: 0 20px;
   			background-color: #fff;
   			border-bottom: 1px solid #ccc;
   			box-shadow: 0px 6px 16px #ccc;
   			transition:  ease .4s;
   		}
   		.nav-bar.hide{
   			top: -50px;
   		}

JQ

$(document).scroll(function(e){
			var beforScrollTop = $(document).scrollTop();
			if(beforScrollTop < 50) return false;
			setTimeout(function(){
				var afterScrollTop = $(document).scrollTop();
				if(afterScrollTop - beforScrollTop < 0){
					$('#nav').removeClass('hide');
				}else if(afterScrollTop - beforScrollTop > 0){
					$('#nav').addClass('hide');
				}
			},50);
		})