jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導航條

更新時間：2013年05月27日 17:31:13 作者：

使用jquery的scrollTop方法監(jiān)視頁面垂直滾動像素，并根據(jù)像素隱藏或者顯示頂部的導航條，具體實現(xiàn)代碼如下，感興趣的朋友可以參考下哈

本文使用jquery的scrollTop方法監(jiān)視頁面垂直滾動像素，并根據(jù)像素隱藏或者顯示頂部的導航條。
效果預覽網(wǎng)址：http://www.keleyi.com/keleyi/phtml/scrolloversee.htm

scrollTop的介紹：

語法
$(selector).scrollTop(offset)

參數(shù)
offset
描述
可選。規(guī)定相對滾動條頂部的偏移，以像素計。

定義和用法
scrollTop() 方法返回或設(shè)置匹配元素的滾動條的垂直位置。
scroll top offset 指的是滾動條相對于其頂部的偏移。
如果該方法未設(shè)置參數(shù)，則返回以像素計的相對滾動條頂部的偏移。

提示和注釋
注釋：該方法對于可見元素和不可見元素均有效。
注釋：當用于獲取值時，該方法只返回第一個匹配元素的 scroll top offset。
注釋：當用于設(shè)置值時，該方法設(shè)置所有匹配元素的 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>監(jiān)視滾動像素，顯示或隱藏頂部導航條-柯樂義</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  target="_blank">.NET</a></li><li><a  target="_blank">Javascript</a></li><li><a  target="_blank">jQuery</a></li><li><a  target="_blank">C#</a></li><li><a  target="_blank">其他</a></li><li><a  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;">柯樂義 監(jiān)視下滾像素</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  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像素以下時，頂部導航出現(xiàn)，否則消失 
$(function () { 
$(window).scroll(function () { 
if ($(window).scrollTop() > 200) { 
$("#topmenu_keleyi_com").fadeIn(100); 
} 
else { 
$("#topmenu_keleyi_com").fadeOut(100); 
} 
}); 
}); 
}); 
</script> 
</body> 
</html> 