主要内容后面的粘性页脚，在滚动条上可见

Question

我想要 re-create 在 http://www.akc.org/dog-breeds/

处找到的这种揭示 sticky-footer 的效果

我知道必须修复页脚。
我知道内容需要更高z-index
我猜（有点）body 需要有一个 margin-bottom 等于页脚的高度？？？

请有人帮助我。

我正在使用 Twitter Bootstrap 4. 一般标记如下所示：

<body>
    <div class="container"> <!-- This part should scroll up to reveal the footer below -->
        <!-- Content goes in here -->
    </div>
    <footer class="footer"> <!-- This should be hidden initially -->
        <div class="container">
            <div class="row">
                <!-- Footer stuff goes in here -->
            </div>
        </div>
    </footer>
</body>

Answer 1

您需要添加一个主要内容 div 然后给这个 div 一个您想要的页面的背景颜色，否则您最终只会有文本重叠，但是是的，您是的，你会想要给你的主要内容 div 一个 z-index 的 1 或其他东西，然后将你的页脚固定在它后面并给它一个 z-index 小于我给它的例子z-index 的 -1。然后您的主要内容 div 将滚动到页脚顶部。您可能希望为页脚指定高度，并为 body 指定相同高度的 padding-bottom。

这是我如何做的一个例子Fiddle Demo:

Html:

<div class="main-content">
  <div class="container">
    <div class="row">
      Your main Content Scroll down
    </div>
  </div>
</div>
<footer>
  <div Class="container">
    <div CLass="row">
      Footer Content
    </div>
  </div>
</footer>

Css:

body{
  padding-bottom:200px;
}
.main-content{
  min-height:200vh;
  background:#fff;
  z-index:1;
}
footer{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:200px;
  background:#000;
  color:#fff;
  z-index:-1;
}

主要内容后面的粘性页脚，在滚动条上可见

Sticky footer behind main content, visible on scroll

html

css

footer

sticky-footer

twitter-bootstrap-4