DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery scrollTop方法根據滾動像素顯示隱藏頂部導航條
jquery scrollTop方法根據滾動像素顯示隱藏頂部導航條
編輯:JQuery特效代碼     
本文使用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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved