熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

利用jquery的滾動條滾動固定div

2013-11-15 12:06:33  來源: JSP教程 

  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
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.