1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>防腾讯固定导航栏</title> 6 <style type="text/css"> 7 *{margin:0;padding:0;} 8 .main{ 9 width: 1000px; 10 margin:0 auto; 11 margin-top: 20px; 12 } 13 </style> 14 <script type="text/javascript" src="../jquery-1.11.1.min.js"></script> 15 <script type="text/javascript"> 16 $(function () { 17 var H = $(".top").height(); 18 $(window).scroll(function () { 19 var docSccrollTop = $(document).scrollTop(); 20 if(docSccrollTop > H){ 21 $(".nav").css({"position":"fixed","top":0}); 22 // 此时 nav的位置固定，如果不设置 main部分的margin-top的话，将有一部分内容被挡住 nav的高度+开始设置的20 23 $(".main").css("margin-top",106); 24 }else{ 25 $(".nav").css({"position":"static"}); /*静态定位*/ 26 $(".main").css("margin-top",20); 27 } 28 }); 29 }); 30 </script> 31 </head> 32 <body> 33 <div class="top"> 34 <img src="images/top.png" /> 35 </div> 36 <div class="nav"> 37 <img src="images/nav.png" /> 38 39 </div> 40 <div class="main"> 41 <img src="images/main.png" /> 42 </div> 43 </body> 44 </html>