可滚动以在下面显示 DIV 的 DIV

Question

我有许多 DIV，我将它们放在另一个之上。

我想要做到的是能够滚动顶部的 DIV，然后在 DIV 的底部，显示下面的 DIV。

到目前为止，这是我必须要做的：

https://codepen.io/dadofgage/pen/yMqZaj

<style>
    #container {
    position: relative;
}

.overlay, .overlay2, .overlay3, 
.content{
    display:block;
    position: absolute;
    top: 0;
    left: 0;
}

.overlay3{
    z-index: 8;
    background: #000;
    color:#fff
}

.overlay2{
    z-index: 9;
    background: #c00;
}

.overlay{
    z-index: 10;
    background: #ccc;
}
</style>


<div id="container">
<div class="overlay3">This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  This is the top div of content.  </div>
<div class="overlay2">This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  This is the SECOND div of content.  </div>
<div class="overlay">This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  This is the THIRD div of content.  </div>
<div class="content">This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  This is the BOTTOM div of content.  </div>

Answer 1

我建议使用.scrollTop()，然后基于此有条件地显示它们。例如：

https://jsfiddle.net/Twisty/89at6t77/

HTML

<div id="container">
  <div id="o-3" class="overlay">This is contents #3.</div>
  <div id="o-2" class="overlay hidden">This is contents #2.</div>
  <div id="o-1" class="overlay hidden">This is contents #1.</div>
  <div id="o-0" class="content hidden">This is content.</div>
</div>

CSS

#container {
  position: relative;
  height: 1500px;
}

.overlay,
.content {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150px;
  text-align: center;
  padding-top: 150px;
}

#o-3 {
  z-index: 8;
  background: #000;
  color: #fff
}

#o-2 {
  z-index: 9;
  background: #c00;
  top: 300px;
}

#o-1 {
  z-index: 10;
  background: #ccc;
  top: 600px;
}

#o-0 {
  top: 900px;
}

.hidden {
  display: none;
}

JavaScript

$(function() {
  var boxHeight = $("#o-3").height();
  $(window).scroll(function(e) {
    currentPos = $(window).scrollTop() + boxHeight;
    if (currentPos > 320) {
      $("#o-2").fadeIn();
    }
    if (currentPos > 620) {
      $("#o-1").fadeIn();
    }
    if (currentPos > 920) {
      $("#o-0").fadeIn();
    }
  });
});