div浮动层与footer相对位置滑动问题（之前的类似问题没有表达清楚的延续）

现在达到的效果是float层多余屏幕的部分隐藏到了footer的底层，
那么我想达到的效果是当float层底部滑动到footer的上界的时候他们的相对位置不变，
并且滚动条一直滑动到footer的最底部 
不知这种效果是否可以实现 
如果还没有清楚 我接着解释 本菜菜表达能力有待改善 O(∩_∩)O~<!DOCTYPE html>
<html>
<head>
<title>aaaaaa</title>
<style type="text/css"> 
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; 
margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px; z-index:1; }.demo{height:1500px; z-index:1; }
.float{width:80px; padding:10px;padding-right:100px; border:1px solid #ffecb0; 
background-color:#fffee0;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);
 position:absolute;  right:10%; top:131px; z-index:1;}
.float1{ padding:10px;padding-right:100px; position:absolute;  left:0px; 
z-index:100; background-color:#000;}
</style> 
<script type="text/javascript" src="jquery-1.4.4.min.js"></script></head>
<body><div><h1>header</h1></div><div class="wrap">
<div class="demo"></div>
<div class="float" id="float">aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/></div></div>
<div class="float1" id = "float1">
<h1>footer</h1>
<p>footerfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooter
footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooter
footerfooterfooter
footerfootereroter
footerfooterfooter
footerfooterfooterfooter
footerfooterfooterer
footerfooterfooterer</p>
<p>footerfooterfooter
footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooteroterfooter
footeroterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooterer
</p>
<p>footerfooterfooterfooter
footerfooterfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooterfooterrfooter
footerfooteroterfooterfooter
footerfooterfooterfooterfooter
footerfooterfooterer
</p>
</div> 
<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));  
});
};
$("#float").smartFloat();
</script>
    
</div></body> 
</html>