封装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>