首頁 > web前端 > js教程 > 主體

jquery scrollTop方法根據捲動像素顯示隱藏頂部導航條_jquery

WBOY
發布: 2016-05-16 17:33:10
原創
1939 人瀏覽過

本文使用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;}


頭>


請捲動滑鼠讓頁面升級

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);
}
};
腳本>
身體>


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板