導航懸浮於頂部代碼學習

導航懸浮於頂部代碼學習，因爲博客園視頻限制，暫時不能全屏觀看，若是想全屏觀看高清視頻，能夠點擊連接查看：http://www.zymseo.com/20.html

 jQuery頁面滾動頂部懸浮導航是一款帶二級下拉菜單的jQuery懸浮導航，導航可跟隨頁面滾動一直出如今頂部，很實用。

 

當你使用此效果裝飾網頁時，出現滾動條沒法下拉的狀況，是由於懸浮元素加入position:fixed樣式以後，已經脫離佈局，頁面的高度不會把懸浮元素的高度計算在內．好比當前例子，瀏覽器的可視區域的高度爲644px,內容未超過644px，瀏覽器將不會出現滾動條．咱們將top的高度設置爲44px，main的高度設置爲600px ，加上導航高度，頁面高度超過644px,出現滾動條，當滾動條滾動的高度超過44px時，導航脫離佈局,導航懸浮，頁面高度爲644px，頁面高度爲644px，不該該出現滾動條，滾動條滾動的高度變爲0,懸浮元素迴歸佈局，頁面高度又大於644px了，由於出現滾動條沒法下拉的現象。

 

解決方法：咱們只需給懸浮元素外包一層div,並將這個div的高度設置爲懸浮元素的高度。

 

本文爲博主原創所著，轉載請註明出處！關注個人博客，第一時間獲取最新SEO網站優化以及web前端開發信息！