javascript - 使用 bootstrap/jQuery 修复了视口(viewport)中的页脚

Question

我正在尝试从该网站复制页脚的效果:

http://www.terradatbroker.com

本质上它所做的就像顶部的图像一样，图像保持固定，而 div 或部分的视口(viewport)滚动。我想要一个充满内容的 div 或页脚 block ，这样当到达页脚时，首先显示页脚的下部，让内容 div 在向下滚动的同时向上滑动。我希望这能清楚地描述它。到目前为止，这是我得到的:

HTML 片段:

<div class="row content-filler">
    Content 1
</div>

<footer>
    <div class="footer">
        <h1 class="">Footer</h1>
    </div>
</footer>

CSS 片段:

  footer {
      background-color: #444;
      min-height: 350px;
      color: #fff;
      margin: 0px;
      padding: 0px;

      z-index: 1;
  }
  .footer {
      margin: 0px;
      padding: 0px;
      background-color: #444;
      position:fixed;
      top: 800px;
      z-index: 1;
  }

这是一个包含完整源代码的 jsfiddle:

https://jsfiddle.net/DTcHh/39204/

我搜索了很多 bootstrap 主题，但找不到能达到这种效果的主题。我也查看了 css，但我怀疑它可能是使用缩小且不可读的 javascript 完成的。任何人都可以阐明这是如何完成的吗？

Answer 1

检查这个https://jsfiddle.net/DTcHh/39205/
页脚固定为bottom:0
最后一个 div.row 有一个 margin-bottom，为页脚留出空间。
希望对您有所帮助，干杯。