title: jQuery Add and Remove Classes When Scrolling
body: <p>Help! I'm in the process of developing a site and I need my navbar links to change color when scrolling down the page. I want it to indicate what current part of the page the user is on. My code:</p>
  
  <p>HTML</p>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;nav class="fixed navbar"&gt;
      &lt;ul&gt;
          &lt;li class="linkone"&gt;&lt;a href="#home"&gt;home&lt;/a&gt;&lt;/li&gt;
          &lt;li class="linktwo"&gt;&lt;a href="#posts"&gt;about&lt;/a&gt;&lt;/li&gt;
          &lt;li class="linkthree"&gt;&lt;a href="#contact"&gt;posts&lt;/a&gt;&lt;/li&gt;
          &lt;li class="linkfour"&gt;&lt;a href="#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;section class="scroll scroll1&gt;
      &lt;h1&gt;Scroll 1&lt;/h1&gt;
  &lt;/section&gt;
  
  &lt;section class="scroll scroll2"&gt;
      &lt;h1&gt;Scroll 2&lt;/h1&gt;
  &lt;/section&gt;
  
  &lt;section class="scroll scroll3"&gt;
      &lt;h1&gt;Scroll 3&lt;/h1&gt;
  &lt;/section&gt;
  
  &lt;section class="scroll scroll4"&gt;
      &lt;h1&gt;Scroll 4&lt;/h1&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <p>
  CSS</p>
  
  <pre><code>.fixed{
    position: fixed;
  }
  .navbar{
    background-color: #333333;
  }
  .darker{
    color: #000000;
  }
  .scroll{
    height: 100vh;
    width: 100vw;
  }
  .scroll1{
    background-color: #555555;
  }
  .scroll2{
    background-color: #666666;
  }
  .scroll3{
    background-color: #777777;
  }
  .scroll4{
    background-color: #888888;
  }
  </code></pre>
  
  <p>jQuery/JS</p>
  
  <pre><code>$(window).scroll(function() {
    if ($(document).scrollTop() &gt; ('scroll1').height()) {
      $('.linktwo').addClass('darker');
      $('.linkone').removeClass('darker');
    } else if ($(document).scrollTop() &gt; ('scroll2').height()){
      $('.linkthree').addClass('darker');
      $('.linktwo').removeClass('darker');
    } else if ($(document).scrollTop() &gt; ('scroll3').height()){
      $('.linthree').addClass('darker');
      $('.linktwo').removeClass('darker');}
  });
  </code></pre>
  
  <p>aaaannnnddd the <a href="http://jsfiddle.net/zpdbd8vy/1/" rel="nofollow">jsfiddle</a></p>
  
  <p>for the life of me I can't figure out why the links aren't changing color at the right times. It could be something as simple as the call function. Please Help me.</p>