基于jquery的滚动条滚动固定div(附Demo)
今天与大家分享一下我写的一个滚动条滚动固定div的例子，现在很多地方都可以看到这样的效果，例如：淘宝商品详情里，滚动条往下来拉的时候，商品详情和评价那个nav会固定，现在很多网站也都有这样类似的效果，现在流行这个么?元芳,你怎么看?我也在网上找了找代码，屡试不爽啊，很多代码乱且没用。于是乎，我自己写一个，代码非常之简单，只有10几行，但遗憾的是，不兼容IE6，如果谁有兼容IE6的例子，还请指教。
直接贴下代码吧。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>demo</title> <script src="jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ var loaded = true; var top = $("#demo").offset().top; function Add_Data() { var scrolla=$(window).scrollTop(); var cha=parseInt(top)-parseInt( scrolla); if(loaded && cha<=0) { $("#demo").removeClass("demo2").addClass("demo1"); $("#demo").html("我现在是蓝色，把滚动条往上拉我会显示成红色。我已经固定了。"); loaded=false; } if(!loaded && cha>0) { $("#demo").removeClass("demo1").addClass("demo2"); $("#demo").html("我现在是红色，把滚动条往下拉我会显示成蓝色。我还没固定了。"); loaded=true; } } $(window).scroll(Add_Data); }); </script> <style type="text/css"> .demo { border: 1px solid #dcdcdc; width: 300px; margin-top: 10px; overflow: auto; text-align: left; background-color: #ffffff; height:200px; } .demo1 { position: fixed; _position: absolute; top: 0px; background-color: #0000ff; height:200px; width:300px; color:#ffffff; } .demo2 { border: 1px solid #dcdcdc; width: 300px; margin-top: 10px; overflow: auto; text-align: left; background-color: #ff0000; height:200px; color:#ffffff; } </style> </head> <body> <div class="demo"> 1 </div> <div class="demo"> 2 </div> <div class="demo"> 3 </div> <div class="demo"> 4 </div> <div class="demo2" id="demo"> 我现在是红色，把滚动条往下啦我会显示成蓝色。我还没固定了。 </div> <div class="demo"> 6 </div> <div class="demo"> 7 </div> <div class="demo"> 8 </div> <div class="demo"> 9 </div> <div class="demo"> 10 </div> </body> </html>
友情提醒：我只提供了一个简单的Demo，在实际开发中Demo中的东西还是需要修改修改的。
附：Demo下载
PS：Tandy Tang祝大家写代码写的愉快！
