<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>固定导航栏</title> <script type="text/javascript" src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script> <style> *{ padding:0px; margin:0px;} .big{ width:100%;height:4000px; background:pink; margin:0 auto; overflow:hidden;} .sub{ width:100%;height:100px; background:yellow; } .fixed{ width:100%; height:80px; background:#F66; text-align:center; top:0px;} </style> </head> <body> <div class="big"> <div class="sub"> 图片区 </div> <div class="fixed">我是固定的哟</div> 我是最大的div </div> </body> </html> <script> $(document).ready(function(e) { t = $('.fixed').offset().top;//获取匹配元素在当前视口的相对偏移 .offset().top：获得位移高度 mh = $('.big').height(); fh = $('.fixed').height(); $(window).scroll(function(e){ s = $(document).scrollTop(); if(s > t - 10){ $('.fixed').css('position','fixed'); if(s + fh > mh){ $('.fixed').css('top',mh-s-fh+'px'); } }else{ $('.fixed').css('position',''); } }) }); </script>