title: DIV that is scrollable to reveal DIV underneath
body: <p>I have a number of DIVs that I have positioned on top of one another.</p>
  
  <p>What I am trying to get to is being able to scroll the top DIV and then once at the bottom of the DIV, reveal the DIV underneath.</p>
  
  <p>Here is where I've got to so far:</p>
  
  <p><a href="https://codepen.io/dadofgage/pen/yMqZaj" rel="nofollow noreferrer">https://codepen.io/dadofgage/pen/yMqZaj</a></p>
  
  <pre><code>&lt;style&gt;
      #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;
  }
  &lt;/style&gt;
  
  
  &lt;div id="container"&gt;
  &lt;div class="overlay3"&gt;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.  &lt;/div&gt;
  &lt;div class="overlay2"&gt;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.  &lt;/div&gt;
  &lt;div class="overlay"&gt;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.  &lt;/div&gt;
  &lt;div class="content"&gt;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.  &lt;/div&gt;
  </code></pre>
  
  <p></p>