title: jQuery highlight menu item when scrolled over section
body: <p>I am trying to highlight the menu item when you scroll down to the section.
  The highlighting works but for some reason I can't remove the highlighting when scrolled to an other section</p>
  
  <p>This is what my menu looks like:</p>
  
  <pre><code>&lt;div id="navbar"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a data-id="home" href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="navbar-right"&gt;&lt;a data-id="cont" href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
              &lt;li class="navbar-right"&gt;&lt;a data-id="exp" href="#exp"&gt;Expertise&lt;/a&gt;&lt;/li&gt;
              &lt;li class="navbar-right"&gt;&lt;a data-id="wie2" href="#wie2"&gt;Wie&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In the html for every section where I use the id anchor I added <code>class="section"</code></p>
  
  <p>This is my jQuery:</p>
  
  <pre><code>jQuery(window).scroll(function () {
          var position = jQuery(this).scrollTop();
  
          jQuery('.section').each(function() {
              var target = jQuery(this).offset().top;
  
              var id = jQuery(this).attr('id');
  
              if (position &gt;= target) {
                  jQuery('#navbar&gt;ul&gt;li&gt;a').removeClass('clicked');
                  jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked');
              }
          });
  });
  </code></pre>
  
  <p>Anyone has any idea why the class get deleted everytime? becuase when I comment out <code>jQuery('#navbar&gt;ul&gt;li&gt;a').removeClass('clicked');</code> it works great. The classes are being added correctly. But removing them doesn't work :(</p>