Use jquery's scroll bar to scroll and fix the 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 am blue now. I will display the scroll bar in red when I pull it up. I have fixed it. ");
Loaded = false;
}
If (! Loaded & cha> 0)
{
$ ("# Demo"). removeClass ("demo1"). addClass ("demo2 ");
$ ("# Demo" ).html ("I am red now. Pull down the scroll bar and I will display it in blue. I am not fixed 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 am red now. I will show the scroll bar down in blue. I am not fixed 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>