页脚低于固定页脚

Question

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

<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。

页脚低于固定页脚

Footer Below Fixed Footer

html

css

navigation

twitter-bootstrap