相容程式碼：封裝getScroll函式以及固定導航欄案例
阿新 • • 發佈：2018-12-20
<!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.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } //滾動事件 window.onscroll=function () { //向上捲曲出去的距離和最上面的div的高度對比 if(getScroll().top>=my$("topPart").offsetHeight){ //設定第二個div的類樣式 my$("navBar").className="nav fixed"; //設定第三個div的marginTop的值 my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px"; }else{ my$("navBar").className="nav"; my$("mainPart").style.marginTop="10px"; } }; </script> <script> //獲取瀏覽器向上捲曲出去的距離的值,向左捲曲出去的距離 // function getScroll() { // var obj={}; // var top1=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0; // var left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft; // obj.left=left; // obj.top=top1; // return obj; // // } // function getScroll() { // var obj={}; // obj.left=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft; // obj.top=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0; // return obj; // // } // function getScroll() { // var obj = { // left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft, // top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 // }; // return obj; // // } //瀏覽器的滾動事件 // window.onscroll=function () { //console.log(getScroll().top); // }; //向上捲曲出去的距離 </script> </body> </html>