封裝getScroll函數 1. 獲取頁面向上或者向左卷曲出去的距離的值 2. 瀏覽器的滾動事件 function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || do ...
封裝getScroll函數
1. 獲取頁面向上或者向左卷曲出去的距離的值 2. 瀏覽器的滾動事件
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值，為防止浮動/脫標造成的影響，這個值設置為導航欄的高
<!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>
