title: Add / Remove class based on page scroll
body: <p>I have a lot sections on my page and all of them is full height and full width. Each section includes an image. </p>
  
  <p>So, When visitor scroll up or scroll down to current section, that image on the section will show up. If user skips the another section, that image on previous section is going to hide. </p>
  
  <p>There is live example. Like this; <a href="https://cliquestudios.com" rel="nofollow noreferrer">https://cliquestudios.com</a></p>
  
  <p>Lets say these are my codes. When user on active section, it should add "active" class to "article" tag. When user left that section, "active" class should be removed and "active" class should be added to user's current section.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.section .image {
     opacity: 0;
  }
  
  .section .active .image {
      opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;section class="all-sections-wrap"&gt;
  
      &lt;article class="section"&gt;
  
      &lt;div class="image"&gt;
      &lt;img src="blabla.png"&gt;
      &lt;/div&gt;
  
      &lt;/article&gt;
  
      &lt;article class="section"&gt;
  
      &lt;div class="image"&gt;
      &lt;img src="blabla.png"&gt;
      &lt;/div&gt;
  
      &lt;/article&gt;
  
      &lt;article class="section"&gt;
  
      &lt;div class="image"&gt;
      &lt;img src="blabla.png"&gt;
      &lt;/div&gt;
  
      &lt;/article&gt;
  
      &lt;section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I was investigated a lot topic in stackoverflow but unfortunately i could not find well enough script.These had a lot of issue about detecting offset and page height.</p>
  
  <p>I would be grateful if i could get any help.</p>
  
  <p>Thanks.</p>