上門一對一計算機家教
當前位置: 首頁 > 建站心得 >

jQuery和CSS3固定頂部菜單特效

點擊: 時間:2016-09-25 來源:北京家教網
參見如下演示效果: http://www.htmleaf.com/Demo/201510222697.html 原理: 將banner和導航包含在一個DIV層header里面,將這個層設位置定位設為:fixed,這樣頂部就固定在上方了 問題來了,header層設為fixed后,本自不占高度,所以下

參見如下演示效果:

http://www.htmleaf.com/Demo/201510222697.html

原理:

將banner和導航包含在一個DIV層header里面,將這個層設位置定位設為:fixed,這樣頂部就固定在上方了

問題來了,header層設為fixed后,本自不占高度,所以下方的內容自動頂到上面去了,解決方法:給body設置padding-top值,等于header層的高度,這樣下方內容就被趕到下面去了,不至于壓在底層。

步驟二:引用js,當向下滑動超過30px的時候,body引入新的樣式,新樣式將重定義body的padding值,同時將banner隱藏掉

明白了原理,就可以運用自如了,幾個固定的js文件必須引入,否則無效

------分隔線----------------------------
30选5开奖查询