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文件，開啟可以體驗效果：

複製程式碼

複製程式碼 程式碼如下:

#topmenu_keleyi_com{位置：固定；頂部：0px；左：0px；右：0px；寬度：800px；左邊距：自動；右邊距：自動；高度：50px；背景顏色：透明；顯示：無;}
#topmenu_keleyi_com li{float:left;
列表樣式：無；
右邊距：1px;
寬度：116px； >背景顏色：#e0f0e0;
}
#topmenu_keleyi_com ul{ margin:0px;padding:0px;}
body{margin:0px;}


頭>

• 。 NET
• Javascript li>
• jQuery
• C#
• 其他
• 首頁

請捲動滑鼠讓頁面升級

www.keleyi.com

歡迎

hi

;

柯樂義

;

keleyi.com

keleyi

;

keleyi.com

柯樂義

;

柯樂義監視下滾像素

;

A

jquery

;

原文

keleyi.com

完整程式碼

;

$(function () {
//當捲軸的位置位於頂部200像素以下時，頂部導覽出現，否則消失
$(function () {
$(window).捲動(function () {
if ($(window).scrollTop() > 200) {
$("#topmenu_keleyi_com").fadeIn(100);
}
else {
$("#topmenu_keleyi_com").fadeOut(100);
}
};
腳本>
身體>