高手们，小弟我这代码运行时为什么出错
高手们，我这代码运行时为什么出错
效果就是这样，但是加入头部，和底部后，就变形了，两边的滚动那个上面永远有顶部高度的距离，想把这个距离去掉，另外底部自动跳到顶部的下面的。
------解决思路----------------------
你想哪个叠哪个 z-index就是表示他们重叠是时候显示的顺序，越大越在上面
<!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>CSS等高布局</title>
<script type="text/javascript" src="http://jt.875.cn/js/jquery.js"></script>
<style type="text/css">
#wrap{
overflow:hidden;
width:1200px;
margin:0 auto;
}
.top{
width:1200px;
height:150px;
background:#000;
margin-bottom: 10px;
}
.left{
float:left;
width:150px;
height:600px ;
background:#00FFFF;
}
#center{
float:left;
width:880px;
height:1800px ;
background:#FF0000;
margin-right: 10px;
margin-left: 10px;
}
.right{
float:right;
width:150px;
height:600px ;
background:#00FF00;
}
.bot{
width:1200px;
height:150px;
margin-top: 10px;
background-color: #00F;
}
</style>
</head>
<body>
<div id="wrap">
<div class="top">
</div>
<div class="left" id="left" >
</div>
<div id="center">
<p>center</p><p>center2</p><p>center3</p><p>center4</p><p>center5</p><p>center6</p><p>center7</p>
</div>
<div class="right" id="right">
</div>
<div class="bot">
</div>
</div>
<script>
var min_scroll=30;///触发效果的滚动条top值,
$(document).scroll(function(){
if($(this).scrollTop()>=min_scroll&&!$('#left').attr('style'))
{
var right={'top':$('#right').offset().top,'left':$('#right').offset().left};
var left={'top':$('#left').offset().top,'left':$('#left').offset().left};
var center={'left':$('#center').position().left}
$('#center').css({'position':'absolute','left':center.left});
$('#left').css({'z-index':10,'position':'fixed','top':left.top,'left':left.left});
$('#right').css({'z-index':10,'position':'fixed','top':right.top,'left':right.left});
}
if($(this).scrollTop()<min_scroll&&$('#left').attr('style'))
{
$('#left').removeAttr('style');
$('#right').removeAttr('style');
$('#center').removeAttr('style');
}
});
</script>
</body>
</html>
效果就是这样，但是加入头部，和底部后，就变形了，两边的滚动那个上面永远有顶部高度的距离，想把这个距离去掉，另外底部自动跳到顶部的下面的。
------解决思路----------------------
你想哪个叠哪个 z-index就是表示他们重叠是时候显示的顺序，越大越在上面