我的页面底部有两个页脚。我希望其中一个始终固定,然后当我滚动到底部时我希望另一个弹出它,所以基本上当我到达页面底部时,“正常”页脚应该在固定页脚下。这是我到目前为止我使用导航栏引导类将其修复到底部。那么这个代码现在做的是当我到达底部时,固定页脚是底部页脚,我想要反过来。
<footer class="footer" role="footerinfo">
<div class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
<div class="col-sm-12">
//When I reach the bottom this shoud be top footer
</div>
</div>
</div>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-sm-12">
//Should not be fixed, be below fixed
</div>
</div>
</div>
</div>
</footer>
任何人都知道我需要修复哪种css样式
答案 0 :(得分:0)
我认为这个人的问题可以帮助你做到这一点:Stop fixed position at footer
基本上,页脚保持固定直到它在一定范围内,然后css样式变为绝对。请查看评分最高的答案中的live demo。
滚动时检查偏移:
$(document).scroll(function() {
checkOffset();
});
使位置绝对在一定范围内,你需要自己调整一下。
function checkOffset() {
if($('#social-float').offset().top + $('#social-float').height()
>= $('#footer').offset().top - 10)
$('#social-float').css('position', 'absolute');
if($(document).scrollTop() + window.innerHeight < $('#footer').offset().top)
$('#social-float').css('position', 'fixed'); // restore when you scroll up
}
无论你使用什么而不是#social-float都需要成为页脚的兄弟:
<div class="social-float-parent">
<div id="social-float">
something...
</div>
</div>
<div id="footer">
</div>
我希望这会有所帮助。他们的问题与你的问题非常相似,所以我不想重新发明解决方案。
答案 1 :(得分:0)
我整理了一个不使用任何javascript的解决方案。这是你在找什么?
https://jsfiddle.net/j611yLem/3/
这是我使用的CSS:
body {
padding: 0;
margin: 0;
}
.container {
position: relative;
padding-bottom: 40px;
}
.first-footer {
position: fixed;
bottom: 0;
background: red;
left: 0;
right: 0;
padding: 10px;
color: #FFF;
}
.second-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: blue;
padding: 10px;
color: #FFF;
}
基本上,您将第一个页脚固定在适当的位置,第二个页脚完全位于容器的底部。
我不确定你的意思是位于页脚顶部(隐藏它)还是略高于页脚。如果您希望第二个页脚覆盖第一个页脚,请将容器的底部填充更改为0px。