效果：当页面产生滚动时，导航栏固定在浏览器可视区域顶部 思路：首先得到导航栏的offsetTop或导航栏上面区域的整体盒子的offsetHeight,然后与页面的滚动距离scrollTop比较，大于则固定，小于则取消固定。 关键知识：scrollTop,onscroll事件 具体代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定导航栏</title> <style> *{ margin:0;padding:0 } body { margin: 0 auto; width: 1423px; } img{ vertical-align: top; } .main{ margin:0 auto; width:1000px; margin-top:10px; } .fixed { position: fixed; top: 0; } </style> </head> <body> <div class="top" id="top"> <img src="images/top.png" alt=""/> </div> <div class="nav" id="Q_nav"> <img src="images/nav.png" alt=""/> </div> <div class="main"> <img src="images/main.png" alt=""/> </div> </body> <script src="my.js"></script> <!-- 注意：防止页面渲染问题,把js导入放body后面 --> <script> var nav = $('Q_nav'); var Top = $('top'); var navTop = nav.offsetTop; // var topH = Top.offsetHeight; // console.log(navTop,topH); window.onscroll = function(){ var scrollTop = scroll().top; // console.log(scrollTop); if(scrollTop >= navTop){ nav.className = "nav fixed"; }else{ nav.className = "nav"; } } //注：上述代码在firefox有bug，因为它不支持得到img撑开的高度(使用的firefox61) </script> </html>my.js文件：
function $(id){ return document.getElementById(id); } function scroll(){ if(window.pageYOffset != null){ //ie9+和各种最新浏览器，注意：为什么使用！=null,因为加载完页面pageYOffset就是0 return { left: window.pageXOffset, top: window.pageYOffset } }else if(document.compatMode == "CSS1Compat"){ //不是怪异模式(即声明了DTD) return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop } }else{ //怪异模式(未声明DTD) return { left: document.body.scrollLeft, top: document.body.scrollTop } } }具体效果可见：固定导航栏
