Question

我需要有2个页脚。第一个页脚应该固定为页面滚动，当滚动到达页面结束时，页脚1应该在页脚2之前休息/放置。

<html>
    <head>
    <style>
    body{
        margin: 0;
    }
    #header{
        height: 100px;
        background: orange;
    }
    #body{
        height: 10000px;
        background: white;
    }
    #footer1{
        height: 100px;
        background: darkblue;
    }
    .footer-sticky{
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        background: pink;
    }
    #footer2{
        height: 100px;
        background: green;
    }
    </style>
    </head>
    <body>
    <div id="header"></div>
    <div id="body"></div>

    <div id="footer1" style="position:fixed;bottom: 0;right: 0;left: 0;background: black;height:50px;color:white;">footer1</div>
    <div id="footer2" style="">footer2</div>
    </body>

    </html>

程序包括2页脚。第一页脚应固定为页面滚动，当滚动到达页面结束，页脚1应在页脚2之前休息/放置。
这是jsfiddle的链接 http://jsfiddle.net/dLe5cv4j/

Answer 1

将position: relative;添加到正文并在末尾（或页面加载事件内）插入此javascript

var f1 = document.getElementById("footer1");
var f2 = document.getElementById("footer2");
window.addEventListener("scroll", function(){
    if (document.body.scrollTop + window.innerHeight >
        document.body.scrollHeight - f2.clientHeight ) {
        f1.style.position = "absolute";
        f1.style.bottom = f2.clientHeight+"px";
    }
    else{
        f1.style.position = "fixed";
        f1.style.bottom = "0px";
    }
});

结果：http://jsfiddle.net/Lkuy0ext/

Answer 2

添加你的风格可能对你有用

#footer1
{
z-index: 1;
}

#footer2 
{
position: relative;
z-index: 2;
}

Answer 3

#footer1{
   margin-bottom:100px;
    height: 100px;
    background: darkblue;
}

编辑并尝试。

fixed div重叠/隐藏下一个div

3 个答案: