<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript">
var scrollbar=function (obj,t_top){
var space=$("#"+obj).offset().top;
$("#"+obj).css("top",space);
void function(){
var goTo = 0;
var roll=setInterval(function(){
var sc=$(document).scrollTop();//+$(document).height();
if (sc>space){
$("#"+obj).css({position: "absolute"});
var height =$(document).scrollTop()+t_top;
var top = parseInt($("#"+obj).offset().top);
//alert(top);
if(height!= top){
goTo = height-parseInt((height - top)*0.9);
$("#"+obj).css("top",goTo+'px');
}
}else{
$("#"+obj).css({position: "inherit"});
}
//else{if(roll) clearInterval(roll);}
},20);
}()
}
$(function() { //页面加载时执行
scrollbar("lookhostory",20);
})
</script>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<div style="width:980px;margin:0 auto;">
<div style="width:200px;float:left;margin-right:10px;">
<div style="width:200px;height:1100px;background:#06C;"></div>
<div id="lookhostory" style="width:200px;height:100px;text-align:center;line-height:100px;background:#963;">要往下滚动的箱子</div>
</div>
<div style="width:770px;float:left;height:2800px;background:#966;"></div>
</div>
</body>
</html>
|
