Using the jquery scroll bar to scroll the pinned Div

JS & jquery





<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 ();





//alert (top)








var cha=parseint (top)-parseint (Scrolla);





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








if (loaded && cha<=0)


{


$ ("#demo"). Removeclass ("Demo2"). AddClass ("Demo1");


$ ("#demo"). HTML ("I'm blue now, pull the scroll bar up and I'll show it red.") I have fixed it. ");


Loaded=false;


}


if (!loaded && cha>0)


{


$ ("#demo"). Removeclass ("Demo1"). AddClass ("Demo2");


$ ("#demo"). HTML ("I'm red now, pull the scroll bar down I'll show it blue.") I haven't fixed it yet. ");


loaded=true;


}


}


$ (window). Scroll (Add_data);


});


</script>





style sheet





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





HTML





<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" >


I'm red now, put the scroll down I'll show it blue. I haven't fixed it yet.


</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>