javascript - 如何将多个 div 层叠在一起，并且当用户滚动每个 div 时向上移动以显示它后面的那个

Question

我想将几个 div 层叠在一起，当用户滚动顶部的 div 时，它会向上滚动以显示其背后的潜水。这是我的意思的图像：

我知道我需要改变文档的自然流动，所以我很可能需要使用绝对位置，但我怎样才能向上滚动每个 div？我尝试在每个具有较低 z-index 的 div 上使用绝对定位，但我不知道如何向上滚动每个。非常感谢任何有关 jQuery/JavaScript 库或 CSS 技巧以实现此目的的指导，或正确方向的一点。

标签： javascriptjquerycsslayout

Answer 1

我不确定您正在寻找什么效果，但以下内容可能会对您有所帮助。$(window).scroll您可以使用事件和$(window).scrollTop()函数来监听窗口的滚动位置。

$(window).scroll(function (e) {
  var scroll = $(window).scrollTop();

  if (scroll > 120) {
    $(".div-1").slideUp();
  }

  if (scroll > 240) {
    $(".div-2").slideUp();
  }
});

section {
  height: 900px;
}

div {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  width: 10rem;
  height: 900px;
  font-size: 2rem;
}

.div-1 { background: #faa; }
.div-2 { background: #aff; }
.div-3 { background: #ffa; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div class="div-3">3</div>
  <div class="div-2">2</div>
  <div class="div-1">1</div>
</section>