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

how to show one fixed Div at bottom behind of another Div reveals on scrolling like parallax

本文关键字：显示 Div 底部 滚动 视差 另一个 何显示 一个      更新时间：2023-09-26

如何在滚动时显示一个固定的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固定在底部)像视差。

您可以在纯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

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

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

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

相关文章：