如何在一个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的下边距和页脚高度设置相同的值。 或至少不小。

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

Answer 2

您可以在div 1和div 2之间添加一个占位符div，它是要隐藏在div 1后面的div的高度和宽度（在这种情况下，如果我正确理解了您的问题，则为div 2）并进行设置占位符的背景为透明。

.div_2 {
    height: 200px;
}
.placeholder {
    height: 200px;
    width: 100%;
}

看看这个https://jsfiddle.net/NahushF/e4e25dga/