功能就是当右边高度没有左边高的情况下做的一些处理，由于本人技术有限，不兼容所有浏览器，
<!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>无标题文档</title>
<style>
body { width:1000px; margin:0 auto; }
.top { height:200px; background-color:#6FF;}
.left { width:500px; float:left; background:#f4f4f4; height:3000px;}
.right { width:500px; float:right; height:1500px; background-color:#CCF; }
.rightPostion { bottom:0px; top:auto; left:50%;}
.bot { clear:both; background-color:#cc3; min-height:150px;}
.cont {
overflow: auto; position:relative;
}
</style>
</head> <body>
<div class="top">此处显示 class "top" 的内容</div>
<div class="cont">
<div class="left" id="left">此处显示 class "left" 的内容</div>
<div class="right rightPostion" id="right">
<p>此处显示 class "right" 的内容</p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>3</p>
<p> </p>
<p> </p>
<p> </p>
<p>5</p>
<p> </p>
<p> </p>
<p>ss</p>
<p> </p>
<p>d</p>
<p>s</p>
<p>d</p>
<p>s</p>
<p>笔筒圣诞节</p>
</div>
</div>
<div class="bot">此处显示 class "bot" 的内容</div>
<script>
var r= document.getElementById("right");
var l = document.getElementById("left");
document.onkeydown = keydown ;
window.onmousewheel = document.onmousewheel = wheel;
var screenH = window.screen.availHeight;
var maxH = l.offsetHeight+200-screenH;
var positionH = r.offsetHeight+200-screenH ;
function wheel(){ if(document.body.scrollTop>=positionH&&document.body.scrollTop<maxH){
r.style.position = "fixed"
}
else if (document.body.scrollTop<positionH) {r.style.position = "static" }
else {
r.style.position = "absolute"
} }
function keydown (e){
e = e || e.event ;
var code = e.keyCode||e.which||e.charCode;
console.log(code);
if(code ==38 || code ==40){
wheel() }
} </script>
</body>
</html>