Question

我的页面底部有两个页脚。我希望其中一个始终固定，然后当我滚动到底部时我希望另一个弹出它，所以基本上当我到达页面底部时，“正常”页脚应该在固定页脚下。这是我到目前为止我使用导航栏引导类将其修复到底部。那么这个代码现在做的是当我到达底部时，固定页脚是底部页脚，我想要反过来。

<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样式

Answer 1

我认为这个人的问题可以帮助你做到这一点：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>

我希望这会有所帮助。他们的问题与你的问题非常相似，所以我不想重新发明解决方案。

Answer 2

我整理了一个不使用任何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。

页脚固定页脚

2 个答案: