javascript - 滚动时，当前div上升，其下的另一个div(在第一个div背景下)显示

Question

我有一个包含两个列表项的无序列表。每个列表项都有填充页面高度的内容。所以这意味着整个网页包含两个可滚动页面。

<ul id="main_ul">
    <li id="page1">													
		<section id="before-after">
        </section>
    </li>
    <li id="page2">
        <section id="video">
        </section>
    </li>
</ul>

我希望当我向下滚动第一个列表内容时隐藏(向上)并且第二个列表内容显示为第一个列表的背景。

看看这个网站http://www.hadana.comuf.com/在我开始滚动图像后，图像会上升并显示其下方的 div。

如何在 css 或 jquery 中做到这一点？

Answer 1

使用 html 和 css，z 索引、透明 div 和固定位置 div 的组合。

在完整 View 中运行下面的代码片段，有点仓促，但你应该明白了。

html,
body {
  height: 100%;
  background: BLUE;
  position: relative;
  margin: 0;
  padding: 0;
}
.section {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 200;
}
.section-one {
  background: RED;
}

.section-two{
  padding-top:200px;  
}
.section-two h1 {
  margin: 0;
  text-align: center;
}
.section-three {
  background: GRAY;
}
.fixed-section {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 100;
  text-align: center;
}

<div class="section-one section">

</div>
<div class="section-two section">
  <h1>THIS IS A TEXT</h1>
</div>
<div class="section-three section">

</div>
<div class="fixed-section">
  <img src="http://placehold.it/350x150">
</div>