Javascript 固定div重叠/隐藏下一个div_Javascript_Html_Css

Javascript 固定div重叠/隐藏下一个div

javascript html css

Javascript 固定div重叠/隐藏下一个div,javascript,html,css,Javascript,Html,Css,我需要有2个页脚。第一个页脚应该固定为页面滚动，当滚动到达页面末尾时，页脚1应该放在页脚2之前 <html> <head> <style> body{ margin: 0; } #header{ height: 100px; background: orange; } #body{ height: 10000px; backg

我需要有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>


身体{
保证金：0；
}
#标题{
高度：100px；
背景：橙色；
}
#身体{
高度：10000px；
背景：白色；
}
#页脚1{
高度：100px；
背景：深蓝色；
}
.footer粘性{
位置：固定；
底部：0；
右：0；
左：0；
背景：粉红色；
}
#页脚2{
高度：100px；
背景：绿色；
}
页脚1
页脚2

程序包含2个页脚。第一个页脚应固定为页面滚动，当滚动到达页面末尾时，页脚1应放在页脚2之前。
这里是JSIDLE链接

编辑并尝试。

添加您的样式可能适合您

#footer1
{
z-index: 1;
}

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

添加

位置：相对到正文，并在末尾（或页面加载事件内部）插入此javascript
结果：也许您需要一点javascript：
#footer1
{
z-index: 1;
}

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

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";
    }
});