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

更新时间：2022-08-02 17:45:05

来源：网络转载

<!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 footerfooter footerfooterfooterfooter footerfooterfooterfooter footerfooterfooterfooterfooterfooter footerfooteroterfooter footeroterfooterfooter footerfooterfooterfooterfooterfooter footerfooterer </p> <p>footerfooterfooterfooter footerfooterfooterfooterfooter footerfooterfooterfooter footerfooterfooterfooter footerfooterfooterfooter footerfooterfooterfooterfooterfooter footerfooterfooterrfooter 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>

------解决方案-------------------- -->

div浮动层与footer相对位置滑动问题（之前的类似问题没有表达清楚的延续）
现在达到的效果是float层多余屏幕的部分隐藏到了footer的底层，
那么我想达到的效果是当float层底部滑动到footer的上界的时候他们的相对位置不变，
并且滚动条一直滑动到footer的最底部
不知这种效果是否可以实现
如果还没有清楚我接着解释本菜菜表达能力有待改善 O(∩_∩)O~

HTML code


<!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
footerfooter

footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooter

footerfooteroterfooter
footeroterfooterfooter
footerfooterfooterfooterfooterfooter

footerfooterer
</p>
<p>footerfooterfooterfooter
footerfooterfooterfooterfooter
footerfooterfooterfooter

footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooter

footerfooterfooterrfooter
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>

------解决方案--------------------