爱站程序员基地本文使用jquery的scrollTop方法监视页面垂直滚动像素，并根据像素隐藏或者显示顶部的导航条。
效果预览网址：http://www.keleyi.com/keleyi/phtml/scrolloversee.htm
scrollTop的介绍：
语法
$(selector).scrollTop(offset)
参数
offset
描述
可选。规定相对滚动条顶部的偏移，以像素计。
定义和用法
scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。
scroll top offset 指的是滚动条相对于其顶部的偏移。
如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。
提示和注释
注释：该方法对于可见元素和不可见元素均有效。
注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。
注释：当用于设置值时，该方法设置所有匹配元素的 scroll top offset。
附完整代码，保存到html文件，打开可以体验效果：
<!DOCTYPE html PUBLIC \”-//W3C//DTD XHTML 1.0 Transitional//EN\” \”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\”>
<html xmlns=\”http://www.keleyi.com/1999/xhtml\”>
<head>
<title>监视滚动像素，显示或隐藏顶部导航条-柯乐义</title>
<style type=\”text/css\”>
#topmenu_keleyi_com{position:fixed;top:0px;left:0px;right:0px;width:800px;margin-left:auto;margin-right:auto;height:50px;background-color:transparent;display:none;}
#topmenu_keleyi_com li{float:left;
list-style:none;
margin-right:1px;
width:116px;
background-color:#e0f0e0;
}
#topmenu_keleyi_com ul{ margin:0px;padding:0px;}
body{margin:0px;}
</style>
<script type=\”text/javascript\” src=\”http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js\”></script>
</head>
<body>
<div id=\”topmenu_keleyi_com\”><ul><li><a href=\”http://www.keleyi.com/menu/net/\” target=\”_blank\”>.NET</a></li><li><a href=\”http://www.keleyi.com/menu/javascript/\” target=\”_blank\”>Javascript</a></li><li><a href=\”http://www.keleyi.com/menu/jquery/\” target=\”_blank\”>jQuery</a></li><li><a href=\”http://www.keleyi.com/menu/csharp/\” target=\”_blank\”>C#</a></li><li><a href=\”http://www.keleyi.com/menu/other/\” target=\”_blank\”>其他</a></li><li><a href=\”http://www.keleyi.com/\” target=\”_blank\”>首页</a></li></ul></div>
<div style=\”background-color:#959822; width:100%;height:150px;\”>请滚动鼠标使页面向下</div>
<div style=\”background-color:Green; width:100%;height:150px;\”>www.keleyi.com</div>
<div style=\”background-color:Red; width:100%;height:150px;\”>欢迎</div>
<div style=\”background-color:Yellow; width:100%;height:150px;\”>hi</div>
<div style=\”background-color:Silver; width:100%;height:150px;\”>柯乐义</div>
<div style=\”background-color:Aqua; width:100%;height:150px;\”>keleyi.com</div>
<div style=\”background-color:Fuchsia; width:100%;height:150px;\”>keleyi</div>
<div style=\”background-color:Green; width:100%;height:150px;\”>keleyi.com</div>
<div style=\”background-color:Blue; width:100%;height:150px;\”>柯乐义</div>
<div style=\”background-color:Olive; width:100%;height:150px;\”>柯乐义 监视下滚像素</div>
<div style=\”background-color:Green; width:100%;height:150px;\”>A</div>
<div style=\”background-color:Purple; width:100%;height:150px;\”>jquery</div>
<div style=\”background-color:Green; width:100%;height:150px;\”><a href=\”http://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm\” target=\”_blank\”>原文</a></div>
<div style=\”background-color:Lime; width:100%;height:150px;\”>keleyi.com</div>
<div style=\”background-color:Orange; width:100%;height:150px;\”>完整代码</div>
<script type=\”text/javascript\”>
$(function () {
//当滚动条的位置处于距顶部200像素以下时，顶部导航出现，否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$(\”#topmenu_keleyi_com\”).fadeIn(100);
}
else {
$(\”#topmenu_keleyi_com\”).fadeOut(100);
}
});
});
});
</script>
</body>
</html>
本文转载自柯乐义http://www.keleyi.com/a/bjac/f4a6f78d74a251c5.htm
