Question

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

<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;

到主要的div。并且还为.main margin-bottom和footer height设置相同的值。或者至少不小一点。

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

Answer 2

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

{{1}}

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

如何在另一个Div的底部显示一个固定的Div显示滚动像视差

2 个答案: