粘性页脚显示

Question

我有部分在 header 上滑动。
但是我需要最后一部分来显示页脚。

在这种情况下可以不用 JavaScript 显示页脚吗？

html,
body,
* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  height: 100%;
  margin-top: 300px;
  margin-bottom: 300px;
}

.header {
  height: 100vh;
  background: tomato;
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
}

.section1,
.section2,
.section3 {
  height: 100vh;
  z-index: 10;
  position: relative;
}

.section1 {
  background: orange;
}

.section2 {
  background: purple;
}

.section3 {
  background: red;
}

.footer {
  height: 10vh;
  position: fixed;
  bottom: 0;
  width: 100%;
  background: aquamarine;
}

<div class="container">
  <div class="header">
    header
  </div>

  <div class="section1">
    section 1
  </div>

  <div class="section2">
    section 2
  </div>

  <div class="section3">
    section 3
  </div>
</div>

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

View on JS Bin

Answer 1

您的页脚未显示的原因是它的 z-index 低于其他部分。但是，如果您为 .footer class 提供比其他部分更高的 z-index，它将始终显示在底部，因为它具有 position: fixed 样式。

一种可能的解决方案是为页脚提供与其他部分相同的 z-index，将其位置更改为 relative，并将其包含在 .container class 中。

这看起来像：

html,
body,
* {
  padding: 0;
  margin: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  height: 100%;
  margin-top: 300px;
  margin-bottom: 300px;
}

.header {
  height: 100vh;
  background: tomato;
  position: fixed;
  width: 100%;
  z-index: 1;
  top: 0;
}

.section1,
.section2,
.section3,
.footer {
  height: 100vh;
  z-index: 10;
  position: relative;
}

.section1 {
  background: orange;
}

.section2 {
  background: purple;
}

.section3 {
  background: red;
}

.footer {
  height: 10vh;
  position: relative;
  bottom: 0;
  width: 100%;
  background: aquamarine;
}

<div class="container">
  <div class="header">
    header
  </div>
  <div class="section1">
    section 1
  </div>
  <div class="section2">
    section 2
  </div>
  <div class="section3">
    section 3
  </div>
  <div class="footer">
    footer
  </div>
</div>

JS Bin

Answer 2

尝试输入：

z-index: 11;

因为您在另一个容器中有 z-index，所以您看不到页脚

Answer 3

您可以考虑使用 position:sticky。

A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as "stuck" until meeting the opposite edge of its containing block.

但是，请考虑 browser compatibility。
目前post，IE不支持"sticky"定位。

这是一个演示：

body {
  margin: 0;
}

.header {
  position:-webkit-sticky;
  position: sticky;
  background: tomato;
  height: 100vh;
  top: 0;
}

.section1,
.section2,
.section3 {
  height: 100vh;
  position: relative;
}

.section1 {
  background: orange;
}
.section2 {
  background: purple;
}
.section3 {
  background: red;
}

.footer {
  position:relative;
  height: 10vh;
  background: aquamarine;
}

<div class="header">
  header
</div>
<div class="section1">
  section 1
</div>
<div class="section2">
  section 2
</div>
<div class="section3">
  section 3
</div>
<div class="footer">
  footer
</div>

粘性页脚显示

Sticky footer reveal

html

css

sticky