利用jquery的滚动条滚动固定div

js & jquery

<script src="jqueryminjs" 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();

//alert(top)


var cha=parseInt(top)parseInt( scrolla);

alert(top+""+scrolla +"="+cha);


if(loaded && cha<=)
{
$("#demo")removeClass("demo")addClass("demo");
$("#demo")html("我现在是蓝色把滚动条往上拉我会显示成红色我已经固定了");
loaded=false;
}
if(!loaded && cha>)
{
$("#demo")removeClass("demo")addClass("demo");
$("#demo")html("我现在是红色把滚动条往下拉我会显示成蓝色我还没固定了");
loaded=true;
}
}
$(window)scroll(Add_Data);
});
</script>

样式表

<style type="text/css">
demo
{
border: px solid #dcdcdc;
width: px;
margintop: px;
overflow: auto;
textalign: left;
backgroundcolor: #ffffff;
height:px;
}
demo
{
position: fixed;
_position: absolute;
top: px;
backgroundcolor: #ff;
height:px;
width:px;
color:#ffffff;
}
demo
{
border: px solid #dcdcdc;
width: px;
margintop: px;
overflow: auto;
textalign: left;
backgroundcolor: #ff;
height:px;
color:#ffffff;
}
</style>

html

<div class="demo">

</div>
<div class="demo">

</div>
<div class="demo">

</div>
<div class="demo">

</div>
<div class="demo" id="demo">
我现在是红色把滚动条往下啦我会显示成蓝色我还没固定了
</div>
<div class="demo">

</div>
<div class="demo">

</div>
<div class="demo">

</div>
<div class="demo">

</div>
<div class="demo">

</div>