title: Adding and removing class, applying styles on scroll
body: <h1>Problem</h1>
  
  <p>I'm having an issue adding and removing classes, applying styles on scroll.
  <br>
  <br>Specifically, when I scroll down the page:</p>
  
  <ul>
  <li>The class of <code>is-red</code> is still on the first <code>.dot__outer</code> group when you scroll down the page when it should be removed, there should be one group highlighted with the <code>is-red</code> class</li>
  <li>There seems to be an issue with my if-statement, as the colors are remaining their default colors and not changing on scroll</li>
  </ul>
  
  <h1>Expected behavior</h1>
  
  <p><strong>Scrolling:</strong></p>
  
  <ul>
  <li>On scroll, remove the class <code>is-red</code> on all divs with a class of <code>dot__outer</code></li>
  <li>Add a class of <code>is-red</code> to the next <code>dot__outer</code> in the series after the user has scrolled past a specific panel. i.e. If a user is on panel two, the second group should be highlighted red</li>
  </ul>
  
  <p><strong>Dot colors:</strong></p>
  
  <ul>
  <li>On black backgrounds, the dots and their borders should be white</li>
  <li>On white backgrounds, the dots and their borders should be black</li>
  <li>In both instances, any <code>dot__outer</code> with a class of <code>is-red</code> should be red</li>
  </ul>
  
  <h1>scripts.js</h1>
  
  <pre><code>$(function() {
  
    function updateProgress() {
      let dot = $(".dot");
  
      let dotsBottom = $(".dots").offset().top + $(".dots").outerHeight();
      let panelHeaderBottom =$(".panel-1").offset().top + $(".panel-1").outerHeight();
      let panelRelatedTop = $(".panel-8").offset().top;
  
      // If the `dot__outer` has a class of `is-active` the dot should also be red. By default, the dot and border should be white.
      if (dot.parent().hasClass("is-red")) {
        $(this).css("background", "red");
      } else {
  
        // If the position of the dots is less than the bottom of the header or greater than the top of the related section, the dots are white. Otherwise, the dots are black
        if (dotsBottom &lt; panelHeaderBottom || dotsBottom &gt; panelRelatedTop) {
          $(this).css("background", "#000");
  
        } else {
          $(this).css("background", "#fff");
        }
      }
  
      $(".panel").each(function(index) {
        let currentPosition = $(window).scrollTop();
        let panelTop = $(this).offset().top;
        let panelBottom = $(this).offset().top + $(this).outerHeight();
  
        if ((currentPosition &gt; panelTop) &amp;&amp; (currentPosition &lt; panelBottom)) {        
          $(".dot__outer").removeClass("is-red");
          $(".dot__outer").eq(index).addClass("is-red");
        } else {
          $(".dot__outer").eq(0).addClass("is-red");
        }
      });
    }
  
    $(window).scroll(function() {
      updateProgress();
    });
  });
  </code></pre>
  
  <h1>index.html</h1>
  
  <pre><code>&lt;div class="panels"&gt;
    &lt;div class="panel panel-1"&gt;Panel #1&lt;/div&gt;
    &lt;div class="panel panel-2"&gt;Panel #2&lt;/div&gt;
    &lt;div class="panel panel-3"&gt;Panel #3&lt;/div&gt;
    &lt;div class="panel panel-4"&gt;Panel #4&lt;/div&gt;
    &lt;div class="panel panel-5"&gt;Panel #5&lt;/div&gt;
    &lt;div class="panel panel-6"&gt;Panel #6&lt;/div&gt;
    &lt;div class="panel panel-7"&gt;Panel #7&lt;/div&gt;
    &lt;div class="panel panel-8"&gt;Panel #8&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="dots"&gt;
  
    &lt;div class="dot__outer is-red"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="dot__outer"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="dot__outer"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="dot__outer"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="dot__outer"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="dot__outer"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="dot__outer"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="dot__outer"&gt;
      &lt;div class="dot"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>Codepen</h1>
  
  <p><a href="https://codepen.io/yacoubian/pen/PBOVKw?editors=1010" rel="nofollow noreferrer">https://codepen.io/yacoubian/pen/PBOVKw?editors=1010</a></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>Scrolling issue fixed, codpen updated.</p>