title: Menu item colors not changing properly when I scroll down to a specific section
body: <p>How can I get each menu item highlighted to it's own color as I scroll to it's section in my WordPress site?
  Eg: If I scroll down to about section, the about menu item should change color. If I scroll to contacts section, the menu item should change to a different color and obviously ABOUT should dehighlight immediately.</p>
  
  <p>At the moment, when I scroll down 150px, the menu get fixed to the top. Then as I scroll down to about section, the menu item gets bold, when go to another section, the respective menu item will turn bold immediately and obviously the about menu item dehighlights.</p>
  
  <pre><code>var num = 150; //number of pixels before modifying styles
      $(window).bind('scroll', function () {
          if ($(window).scrollTop() &gt; num) {
              $('nav#site-navigation').addClass('fixed');                       
          } else {
              $('nav#site-navigation').removeClass('fixed');        
          }
      });    
      $("nav ul li a").addClass("marker");
  
      var navLinks = $('nav ul li a'),
      navH = $('nav').height(),
      section = $('section'),
      documentEl = $(document);        
      documentEl.on('scroll', function() {            
          var currentScrollPos = documentEl.scrollTop();            
          section.each(function() {
             var self = $(this);
             if (self.offset().top &lt; (currentScrollPos + navH ) &amp;&amp; (currentScrollPos + navH) &lt; (self.offset().top + self.outerHeight())) {
                 var targetClass = '.' +self.attr('class') + 'marker';
                 navLinks.removeClass('active');
                 $(targetClass).addClass('active'); 
             }                
          });            
      });
  </code></pre>
  
  <p>Now for the colors, I added this snippet to the first function but the colors only change when I click on each menu item more than once.   </p>
  
  <pre><code>$("a.marker.active:contains(About)").addClass('item-2');        
  $("a.marker.active:contains(Products)").addClass('item-3');
  $("a.marker.active:contains(Scent)").addClass('item-4');
  $("a.marker.active:contains(Clients)").addClass('item-5');
  $("a.marker.active:contains(Contact)").addClass('item-6');
  </code></pre>
  
  <p>Any different way of solving this?</p>