jQuery实现滚动自动显示隐藏导航貌似插件挺多了，Headroom.js、基于bootstrap的jquery.bootstrap-autohidingnavbar.js，jBar.js，但似乎也没必要那么麻烦，或者它们确实有其他优势，目前我还不是很清楚。
本文附件下载地址：http://pan.baidu.com/s/1qW7Vuji
正文
1、首先在你的页面引入jQuery.js包
jquery.min.js文件见附件《jquery.min.js》
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
2、创建导航
<div class="bar">
<ul class="text">
<li>cmdb</li>
<li>业务监控系统</li>
<li>运维自动化平台</li>
<li>智能日志分析</li>
<li>GM游戏运营管理</li>
<li>知识管理体系</li>
</ul>
</div>
3、给导航添加样式
* {margin:0; padding:0;}
.bar{
width:1000px;
height:30px;
line-height:30px;
position:fixed;
left:50%;
margin-left:-500px;
top:0;
z-index:888;
background:#636871;
}
.text li{
color: white;
float: left;
width: 12%;
}
4、开始js脚本
height是算出当前页面距离顶部的长度，再判断当大于100px时就隐藏class名为bar的div，否则就显示它。fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是显示的。
讲解下关于jquery的相关知识：1）$(function(){}是jQuery，当问到载入完毕就执行
2）$(document) 是当前文档，就是你看到的整个网页，$(window) 如果没有框架则就是你浏览的当前浏览器的窗口
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
height = $(window).scrollTop();
if(height > 100){
$('.bar').fadeIn();
}else{
$('.bar').fadeOut();
};
});
});
</script>
最后贴上整个文件：也可以在附件中的《demo》直接打开
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
height = $(window).scrollTop();
if(height > 100){
$('.bar').fadeIn();
}else{
$('.bar').fadeOut();
};
});
});
</script>
</head>
<body>
<div class="bar">
<ul class="text">
<li>cmdb</li>
<li>业务监控系统</li>
<li>运维自动化平台</li>
<li>智能日志分析</li>
<li>GM游戏运营管理</li>
<li>知识管理体系</li>
</ul>
</div>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
<div>I want to go back to the top.</div><br/>
</body>
</html>