<!DOCTYPE html> <html lang="zh-cn"> <head> <meta name="baidu-site-verification" content="mleTTANrEl" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=1024" /> <meta name="author" content="ruifox" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <link rel="stylesheet" href="http://www.foxmeeting.com/layouts/css/foxmeeting/style.css" /> <link rel="stylesheet" href="http://www.foxmeeting.com/layouts/css/foxmeeting/pulic.css" /> <!--[if lt IE 9]><script type="text/javascript" src="http://www.ruifox.com/resouce/layouts/js/foxmeeting/company/html5.js"></script><![endif]--> <!--[if IE 6]> <script src="//letskillie6.googlecode.com/svn/trunk/2/zh_CN.js"></script> <![endif]--> <title></title> <style type="text/css"> nav{width:100%; height:100px; background:#1BABB7; position:fixed; top:0; display:block;} body{height:2000px;} .bt{background:#1BABB7; width:100%; height:50px; color:#fff; position:fixed; bottom:0; font-size:30px; text-align:center; line-height:50px;} </style> </head> <body> <nav class=""></nav> <div class="bt"></div> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> var y=0; $(window).scroll(function(){ x=$(window).scrollTop(); $(".bt").html(x); if(x<y){ $("nav").slideDown(); y=x; }else{ y=x; $("nav").slideUp(); } $("nav").html(y); }) </script> </body> </html>
//思路大概就是计算鼠标滑轮的变化， 当往下滚动的时候，导航条消失，向上滚动显示出来
原文：http://www.cnblogs.com/hjzj/p/3544492.html