title: Detect When Div scrolls out of view
body: <p>I have a div box with all the page content within it called <code>.body-Container</code></p>
  
  <p>and there is a div box that is placed on top of the <code>.body-Container</code> which is acting like a cover called <code>.coverImg</code>.</p>
  
  <p>What I am trying to achieve is having the <code>.body-Container</code> positioned fixed until the <code>.coverImg</code> scrolls out of view, then changes position from fixed to relative. To allow the user to continue on viewing the content.</p>
  
  <p>Then reverse, when scrolled to the top of the web page <code>.body-Container</code> becomes fixed and the <code>.coverImg</code> comes back into view.</p>
  
  <p>I have given the <code>.coverImg</code> a <code>magin-bottom:100vh</code> which allows the div to scroll out of view. </p>
  
  <p>I am having difficulty detecting when the bottom of the div hits the top of the window. To change the positioning. </p>
  
  <p>Here is a <a href="https://jsfiddle.net/ra48qumb/4/" rel="nofollow">jsfiddle</a> to give a better understanding of what I am trying to do.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="coverImg" style="background-image:url(https://cdn.creativelive.com/fit/https%3A%2F%2Fcdn.creativelive.com%2Fagc%2Fcourses%2F5158-1.jpg/640);"&gt;
  &lt;/div&gt;
  
  &lt;div class="body-Container"&gt;
    &lt;div class="content"&gt;
      &lt;div class='section'&gt;
      &lt;/div&gt;
      &lt;div class='section'&gt;
      &lt;/div&gt;
      &lt;div class='section'&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.body-Container {
    position: relative;
    position:fixed;
    width: 100%;
    height: 99vh;
    margin: 0;
    padding: 0;
    border: 3px solid red;
  }
  
  .coverImg {
    width: 90%;
    height: 150vh;
    margin: 0 auto;
    border: 3px solid black;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0;
    margin-bottom: 100vh;
    z-index: 2;
  }
  
  .content {
    width: 90%;
    height: 2500px;
    margin: 0 auto;
    position: absolute;
    top: 20px;
    bottom: 0px;
    left: 0px;
    right: 0;
    z-index: 1;
    background-color: skyblue;
  }
  </code></pre>