Package function getScroll
1. Obtain the value of the page curl up or left out distance
2. Scroll event browser
function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } // scroll event browser window.onscroll = function () { console.log(getScroll().top); };
Case: Fixed navigation
After obtaining a height greater than the high value determination scrollTop navigation bar, fixed pattern is set, while, the value marginTop home portion, to prevent the floating / off marked influence caused by setting this value to the navigation high
<!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> // Get the value of the left page curl up or out the distance function getScroll () { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0, top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } // slip event window.onscroll = function () { IF (getScroll (). Top > = My $ ( " topPart " ) .offsetHeight) { // set the second div class style My $ ( " NavBar " ). className = " NAV Fixed " ; // set the value of the third mainTop the div My $ ( " mainPart " ) .style.marginTop = My $ ( " NavBar " ) .offsetHeight + " PX " ; } else { my$("navBar").className = "nav"; my$("mainPart").style.marginTop = "10px"; } }; </script> </body> </html>