最近寫一個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必須注意！