把div固定在网页顶部
很多网站都有把某一块固定在顶部的功能，今天上网搜搜然后自己又写了一遍，贴出来给大家看看，哪天用到的时候自己也可以随时看看
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head runat="server"> 4 <title></title> 5 <script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 $(function() { 8 //获取要定位元素距离浏览器顶部的距离 9 var navH = $(".hb").offset().top; 10 //滚动条事件 11 $(window).scroll(function() { 12 //获取滚动条的滑动距离 13 var scroH = $(this).scrollTop(); 14 //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离，就固定，反之就不固定 15 if (scroH >= navH) { 16 $(".hb").css({ "position": "fixed", "top": 0 }); 17 } 18 else if (scroH < navH) { 19 $(".hb").css({ "position": "static" }); 20 } 21 }) 22 }) 23 </script> 24 </head> 25 <body> 26 <div style=" height: 300px;"> 27 空div</div> 28 <div class="hb" style="height: 100px; width: 100%; background: #999"> 29 移动到顶部固定不变</div> 30 <div style="background: #ccc; height: 1500px;"> 31 空div</div> 32 </body> 33 </html> 34 35 View Code
西游记告诉我们：凡是有后台的妖怪都被接走了，凡是没后台的都被一棒子打死了。
