title: Active menu item on page scroll
body: <p>I used this type of menu on my "one page" site:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav"&gt;
  &lt;li class="item-101 hovernav"&gt;  &lt;a href="/site/"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-102 hovernav"&gt;  &lt;a class="scroll" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-103 hovernav"&gt;  &lt;a class="scroll" href="#services"&gt;Services&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-104 hovernav"&gt;  &lt;a class="scroll" href="#our-work"&gt;Work&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>and with this code i successfully have active menu item on page scroll. When i scroll down to the next anchor i see my menu item change its state to active. This is the code i use with success:</p>
  
  <pre><code>var sections = jQuery('section')
    , nav = jQuery('nav')
    , nav_height = nav.outerHeight();
  
  jQuery(window).on('scroll', function () {
    var cur_pos = jQuery(this).scrollTop();
  
    sections.each(function() {
      var top = jQuery(this).offset().top - nav_height,
          bottom = top + jQuery(this).outerHeight();
  
      if (cur_pos &gt;= top &amp;&amp; cur_pos &lt;= bottom) {
        nav.find('a').removeClass('current');
        sections.removeClass('current');
  
        jQuery(this).addClass('current');
        nav.find('a[href="#'+jQuery(this).attr('id')+'"]').addClass('current');
      }
    });
  });
  </code></pre>
  
  <p>But i changed recently my menu type to this one:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav level0"&gt;
  &lt;li itemprop="name" class="current active home-menu-btn" data-id="103" data-level="1" data-class="home-menu-btn"&gt;
  &lt;a itemprop="url" class="" href="/site/index.php/el/" data-target="#"&gt;Home&lt;/a&gt;
  &lt;/li&gt;
  &lt;li itemprop="name" class="scroll" data-id="104" data-level="1" data-class="scroll"&gt;
  &lt;a itemprop="url" class="" href="#about" data-target="#"&gt;About&lt;/a&gt;
  &lt;/li&gt;
  &lt;li itemprop="name" class="scroll" data-id="105" data-level="1" data-class="scroll"&gt;
  &lt;a itemprop="url" class="" href="#skills" data-target="#"&gt;Skills&lt;/a&gt;
  &lt;/li&gt;
  &lt;li itemprop="name" class="scroll" data-id="106" data-level="1" data-class="scroll"&gt;
  &lt;a itemprop="url" class="" href="#experience" data-target="#"&gt;Experience&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Now the script i used is not working. I guess now the code must search menu 'id' on "a" tag but add the class to "li" tag of menu item. That is the difference. But how can i make this?</p>