<!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>
菜鸟路过，俺说一句，，至少告知出的什么错……
打开正常，一往下拉就错位
是不是没有铆定啊？或者没有强制缩放
绑定了，只要一拉，两个就变成一个了，还错位