页面滚动中的活动菜单项

Question

I used this type of menu on my "one page" site:

<ul class="nav navbar-nav">
<li class="item-101 hovernav">  <a href="/site/">Home</a></li>
<li class="item-102 hovernav">  <a class="scroll" href="#about">About</a></li>
<li class="item-103 hovernav">  <a class="scroll" href="#services">Services</a></li>
<li class="item-104 hovernav">  <a class="scroll" href="#our-work">Work</a></li>
</ul>

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:

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 >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('current');
      sections.removeClass('current');

      jQuery(this).addClass('current');
      nav.find('a[href="#'+jQuery(this).attr('id')+'"]').addClass('current');
    }
  });
});

But i changed recently my menu type to this one:

<ul class="nav navbar-nav level0">
<li itemprop="name" class="current active home-menu-btn" data-id="103" data-level="1" data-class="home-menu-btn">
<a itemprop="url" class="" href="/site/index.php/el/" data-target="#">Home</a>
</li>
<li itemprop="name" class="scroll" data-id="104" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#about" data-target="#">About</a>
</li>
<li itemprop="name" class="scroll" data-id="105" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#skills" data-target="#">Skills</a>
</li>
<li itemprop="name" class="scroll" data-id="106" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#experience" data-target="#">Experience</a>
</li>
</ul>

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?

Answer 1

 $(document).ready(function() { $(document).on("scroll", onScroll); function onScroll(event){ var scrollPos = $(document).scrollTop(); $('a').each(function () { var currLink = $(this); var refElement = $(currLink.attr("href")); if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { $('a').removeClass("active"); currLink.addClass("active"); } else{ currLink.removeClass("active"); } }); } }) 

 body, html { margin: 0; padding: 0; height: 100%; width: 100%; } ul { position: fixed; } ul li { list-style: none; margin: 0 30px 0 0; display: inline; } .active { font-family:'Droid Sans', serif; font-size: 14px; color: #fff; text-decoration: none; line-height: 50px; } a { font-family:'Droid Sans', serif; font-size: 14px; color: black; text-decoration: none; line-height: 50px; } #home { background-color: grey; height: 100%; width: 100%; overflow: hidden; } #services { background-color: #878775; height: 100%; width: 100%; } #about { background-color: blue; height: 100%; width: 100%; } #work { background-color: red; height: 100%; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <ul class="nav navbar-nav"> <li class="item-101 hovernav"> <a href="#home" class="active">Home</a></li> <li class="item-102 hovernav"> <a class="scroll" href="#about">About</a></li> <li class="item-103 hovernav"> <a class="scroll" href="#services">Services</a></li> <li class="item-104 hovernav"> <a class="scroll" href="#work">Work</a></li> </ul> <div id="home"></div> <div id="about"></div> <div id="services"></div> <div id="work"></div>