基于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> 