javascript - 如何显示一个固定的 Div 在底部后面的另一个 Div 显示像视差一样滚动

Question

如何像视差一样在滚动时显示一个固定的 div 在另一个 Div 后面的底部显示

https://jsfiddle.net/wa6b645e/

<div class="div_1">
<h1>DIV One</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>

<p>..more content here..</p>
</div>

<div class="div_2">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>

当滚动 div_1 时，像视差一样显示底部的 div_2(此 div 固定在底部)。 请帮我找到解决方案。

Answer 1

您可以使用纯 CSS 来完成。我创建了自己的示例，我认为其他人会更清楚:

html {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
}

.main {
  position: relative;
  z-index: 1;
  background-color: #999;
  overflow: hidden;
  height: 100%;
  margin-bottom: 200px;
}

footer {
  height: 200px;
  width: 100%;
  background-color: #333;
  overflow: hidden;
  position: fixed;
  bottom: 0;
}

重要的是补充

position: relative;

到主分区。并为 .main margin-bottom 和 footer height 设置相同的值。或者至少不小。

这是一个工作示例:http://codepen.io/paweljanicki/pen/YGWGEx