Question

我有很多DIV，我已经将它们放在一起。

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

这是我到目前为止所处的位置：

<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();
    }
  });
});

可滚动显示DIV下方的DIV

1 个答案: