大神，小弟我这代码运行时为什么出错
大神，我这代码运行时为什么出错？
打开正常，往下拉，出现错位等问题。请高手指点
------解决思路----------------------
我猜你要的是这种效果？
<!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;
}
.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;
}
</style>
</head>
<body>
<div id="wrap">
<div class="left" id="left">
<script type="text/javascript">
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#left").smartFloat();
</script>
</div>
<div id="center">
<p>center</p>
</div>
<div class="right" id="right">
<script type="text/javascript">
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
//绑定
$("#right").smartFloat();
</script>
</div>
</div>
</body>
</html>
打开正常，往下拉，出现错位等问题。请高手指点
------解决思路----------------------
我猜你要的是这种效果？
<!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;
}
.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;
}
</style>
</head>
<body>
<div id="wrap">
<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">
<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>
</div>
</div>
</body>
</html>