利用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>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20304.html