DIV, который можно прокручивать, чтобы открыть DIV под ним

У меня есть несколько 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>


scroll html jquery css effect
person Mike    schedule 30.03.2017    source источник
comment
Вы должны показать здесь минимальный пример кода, который показывает проблему, а не сторонний веб-сайт, который может исчезнуть завтра. Покажите нам, что вы jQuery.   -  person Rob    schedule 30.03.2017
comment
У меня нет другого кода - это то, что я пытаюсь выяснить   -  person Mike    schedule 30.03.2017
comment
@Майк, что ты пробовал? Это только CSS и HTML. Где ваш JavaScript или jQuery?   -  person Twisty    schedule 31.03.2017

Ответы (1)


arrow_upward
0
arrow_downward

Я бы предложил использовать .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();
    }
  });
});
person Twisty    schedule 30.03.2017
comment
Спасибо вам за вашу помощь! Что, если я хочу поместить DIV один поверх другого, чтобы при прокрутке отображался тот, что под ним? Если я использую position:absolute и top:0, это делает это, но поскольку вы прокручиваете, вы технически переместили родительский div вверх - person Mike; 05.04.2017
comment
Я немного обновил вашу скрипку, чтобы попытаться лучше показать окончательный эффект, к которому я стремлюсь. Мое следующее препятствие — получить переменную высоту в этих DIV jsfiddle.net/dadofgage/0k7az7mL - person Mike; 05.04.2017
comment
@Майк, это можно сделать. Если высота является переменной, вам просто нужно получить высоту каждого div, возможно, сохраненную в массиве, и соответствующим образом настроить, когда вы показываете и скрываете разные части. - person Twisty; 05.04.2017