title: Change CSS based on scroll position -- Refactoring bad code
body: <p>I have written a jQuery function that changes the css value of a nav menu item based on if its reference section is viewable in the window.</p>
  
  <pre><code>$(window).scroll(function() {
  
      var scroll = $(window).scrollTop();
  
      if (scroll &lt;= 590) {
          $("#menu-item-25 a").addClass('blue');
          $("#menu-item-26 a").removeClass('blue');
          $("#menu-item-22 a").removeClass('blue');
          $("#menu-item-23 a").removeClass('blue');
          $("#menu-item-24 a").removeClass('blue');
      }
      else if (scroll &gt;= 591 &amp;&amp; scroll &lt;= 1380) {
          $("#menu-item-26 a").addClass('blue');
          $("#menu-item-25 a").removeClass('blue');
          $("#menu-item-22 a").removeClass('blue');
          $("#menu-item-23 a").removeClass('blue');
          $("#menu-item-24 a").removeClass('blue');
      }
      else if (scroll &gt;= 1381 &amp;&amp; scroll &lt;= 2545) {
          $("#menu-item-22 a").addClass('blue');
          $("#menu-item-25 a").removeClass('blue');
          $("#menu-item-26 a").removeClass('blue');
          $("#menu-item-23 a").removeClass('blue');
          $("#menu-item-24 a").removeClass('blue');
      }
      else if (scroll &gt;= 2546 &amp;&amp; scroll &lt;= 2969) {
          $("#menu-item-23 a").addClass('blue');
          $("#menu-item-25 a").removeClass('blue');
          $("#menu-item-26 a").removeClass('blue');
          $("#menu-item-22 a").removeClass('blue');
          $("#menu-item-24 a").removeClass('blue');
      }
      else if (scroll &gt;= 2970) {
          $("#menu-item-24 a").addClass('blue');
          $("#menu-item-25 a").removeClass('blue');
          $("#menu-item-26 a").removeClass('blue');
          $("#menu-item-22 a").removeClass('blue');
          $("#menu-item-23 a").removeClass('blue');
      }
  });
  </code></pre>
  
  <p>It looks awfully ugly. Is there a better way to achieve this goal? </p>