<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>测试</title>
<script type="text/javascript" src="http://www.cqxinhao.com/image/jquery-1.4a2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
t = $('.piaofu').offset().top;
mh = $('.left').height();
fh = $('.piaofu').height();
$(window).scroll(function(e){
s = $(document).scrollTop();
if(s > t - 10){
$('.piaofu').css('position','fixed');
if(s + fh > mh){
$('.piaofu').css('top',mh-s-fh+'px');
}
}else{
$('.piaofu').css('position','');
}
})
});
</script>
<style type="text/css">
*{ padding:0px; margin:0px;}
.box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden;}
.left{ width:770px;height:2000px; background:#000;float:left;}
.right{ width:220px; background:#FC6; float:right;}
.sub01{ width:220px; height:100px; background:#0CC; margin-bottom:10px;}
.piaofu{ width:220px; height:300px; background:#F66; font:normal 13px/30px \5FAE\8F6F\96C5\9ED1; text-align:center; top:10px;}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right">
<div class="sub01"></div>
<div class="sub01"></div>
<div class="sub01"></div>
<div class="piaofu">我要固定漂浮</div>
</div>
</div>
</body>
</html>