快捷導(dǎo)航

基于jquery的滾動條滾動固定div(附演示下載)

更新時(shí)間：2012年10月29日 23:42:30 作者：

今天與大家分享一下我寫的一個(gè)滾動條滾動固定div的例子，現(xiàn)在很多地方都可以看到這樣的效果

例如：淘寶商品詳情里，滾動條往下來拉的時(shí)候，商品詳情和評價(jià)那個(gè)nav會固定，現(xiàn)在很多網(wǎng)站也都有這樣類似的效果，現(xiàn)在流行這個(gè)么?元芳,你怎么看?我也在網(wǎng)上找了找代碼，屢試不爽啊，很多代碼亂且沒用。于是乎，我自己寫一個(gè)，代碼非常之簡單，只有10幾行，但遺憾的是，不兼容IE6，如果誰有兼容IE6的例子，還請指教。

直接貼下代碼吧。

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<title>demo</title> 
<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(); 
var cha=parseInt(top)-parseInt( scrolla); 
if(loaded && cha<=0) 
{ 
$("#demo").removeClass("demo2").addClass("demo1"); 
$("#demo").html("我現(xiàn)在是藍(lán)色，把滾動條往上拉我會顯示成紅色。我已經(jīng)固定了。"); 
loaded=false; 
} 
if(!loaded && cha>0) 
{ 
$("#demo").removeClass("demo1").addClass("demo2"); 
$("#demo").html("我現(xiàn)在是紅色，把滾動條往下拉我會顯示成藍(lán)色。我還沒固定了。"); 
loaded=true; 
} 
} 
$(window).scroll(Add_Data); 
}); 
</script> 
<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> 
</head> 
<body> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo2" id="demo"> 
我現(xiàn)在是紅色，把滾動條往下啦我會顯示成藍(lán)色。我還沒固定了。 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
<div class="demo"> 
</div> 
</body> 
</html> 