基于jquery的滚动条滚动固定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"> </div> <div class="demo"> </div> <div class="demo"> </div> <div class="demo"> </div> <div class="demo2" id="demo"> 我现在是红色，把滚动条往下啦我会显示成蓝色。我还没固定了。 </div> <div class="demo"> </div> <div class="demo"> </div> <div class="demo"> </div> <div class="demo"> </div> <div class="demo"> </div> </body> </html> 友情提醒：我只提供了一个简单的Demo，在实际开发中Demo中的东西还是需要修改修改的。在线演示：http://demo.jb51.net/js/2012/scrollfixed/附：Demo下载

　　推荐阅读

　　JS的replace方法详细介绍

replace() 方法的参数 replacement 可以是函数而不是字符串。在这种情况下，每个匹配都调用该函数，它返回的字符串将作为替换文本使用。该函数的第一个参数是匹配模式的字符串。接下来的参数是与模式中的子表达式>>>详细阅读

本文标题：基于jquery的滚动条滚动固定div(附演示下载)

地址：http://www.17bianji.com/kaifa2/JS/22966.html

1/2 1