html - 页脚低于固定页脚

Question

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

<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

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