最近写一个zblogPHP主题，需要用到滚动的时候隐藏菜单，而启动回滚的时候置顶显示这个菜单，如图：
这个jQuery特效非常好用，兼容性也比较好！
分享滚动隐藏测试代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>滚动隐藏，回滚显示</title>
<style>
*{padding: 0;margin: 0;text-align: center}
.nav{ background-color:#e74c3c; color:#fff; font-size:24px; padding:5px;
position: fixed; top:0; left:0;right: 0; //必带
transition: top .5s;}
.text{}
.gizle {top: -90px;} //必带
.sabit {top:0;z-index: 9999;} //必带
</style>
</head>
<body>
<div class="nav">
滚动显示或隐藏的菜单文字、菜单文字、菜单文字
</div>
<div class="text">
下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>下拉测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>测试文字<br>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function(){
var yd_seviye = $(document).scrollTop();
var yd_yuksekligi = $('.nav').outerHeight();
$(window).scroll(function() {
var yd_cubugu = $(document).scrollTop();
if (yd_cubugu > yd_yuksekligi){$('.nav').addClass('gizle');}
else {$('.nav').removeClass('gizle');}
if (yd_cubugu > yd_seviye){$('.nav').removeClass('sabit');}
else {$('.nav').addClass('sabit');}
yd_seviye = $(document).scrollTop();
});
});
</script>
</body>
</html>必须注意其中的CSS必须注意！