function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } //瀏覽器的滾動事件 window.onscroll = function () { console.log(getScroll().top); };
獲取scrollTop值後判斷高度大於導航欄的高,就設置樣式固定住,同時,主頁部分的marginTop值,爲防止浮動/脫標形成的影響,這個值設置爲導航欄的高html
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 0 auto; width: 1000px; margin-top: 10px; } .fixed { position: fixed; top: 0; left: 0; } </style> </head> <body> <div class="top" id="topPart"> <img src="images/top.png" alt="" /> </div> <div class="nav" id="navBar"> <img src="images/nav.png" alt="" /> </div> <div class="main" id="mainPart"> <img src="images/main.png" alt="" /> </div> <script src="common.js"></script> <script> //獲取頁面向上或者向左捲曲出去的距離的值 function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } //滑動事件 window.onscroll = function () { if (getScroll().top >= my$("topPart").offsetHeight) { //設置第二個div的類樣式 my$("navBar").className = "nav fixed"; //設置第三個div的mainTop值 my$("mainPart").style.marginTop = my$("navBar").offsetHeight + "px"; } else { my$("navBar").className = "nav"; my$("mainPart").style.marginTop = "10px"; } }; </script> </body> </html>