滚动固定导航：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <style> body{ margin:0; padding: 0; } .top{ width:100%; height: 100px; background: aquamarine;} .nav{ width:100%; height: 40px; background: darkgreen; } .content{ margin:0 auto; width:100%; height:1600px; background: cadetblue;} .content img{ width:100%;} .footer{ width:100%; height: 80px; background: darkgreen;} .navfixed{ position: fixed; top:0px;} </style> <title>Title</title> </head> <body> <div class="top" id="dv1"></div> <div class="nav" id="dv2"></div> <div class="content" id="dv3"> <img src="images/bg.jpg" alt="" > </div> <div class="footer" id="dv4"></div> <script> window.onscroll = function(){ if(document.documentElement.scrollTop>=100){ document.getElementById("dv2").className="nav navfixed"; document.getElementById("dv3").style.marginTop="40px" }else{ document.getElementById("dv2").className="nav"; document.getElementById("dv3").style.marginTop="0px" } } </script> </body> </html>