固定div重叠/隐藏下一个div
[英]fixed div overlaps/hide the next div
问题描述
I need to have 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2. 
我需要有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>
Program includes 2 footer.The first footer should be fixed as page scrolls, as scroll reaches page end, footer1 should rest/placed before the footer2. 程序包含2个页脚。第一个页脚应在页面滚动时固定，当滚动到达页面末尾时，页脚1应在页脚2之前放置/放置。
Here's jsfiddle link http://jsfiddle.net/dLe5cv4j/ 这是jsfiddle链接http://jsfiddle.net/dLe5cv4j/
3 个解决方案
解决方案1
3 2015-11-27 08:14:47
add position: relative; 添加position: relative; to the body and insert this javascript at the end (or inside the page load event) 到正文，并在末尾（或在页面加载事件内）插入此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";
}
});
Result: http://jsfiddle.net/Lkuy0ext/ 结果： http : //jsfiddle.net/Lkuy0ext/
解决方案2
1 2015-11-27 07:59:05
Add in your styles may work you 添加样式可能对您有用
#footer1
{
z-index: 1;
}
#footer2
{
position: relative;
z-index: 2;
}
解决方案3
0 2015-11-27 07:57:49
#footer1{
margin-bottom:100px;
height: 100px;
background: darkblue;
}
edit and try. 编辑并尝试。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.