Active menu item on page scroll

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?

Can i have your content html code so we can test this or can you create a jsfiddle ? — Edison Biba, Aug 02 '17 at 10:43
I use this framework [link](http://demo.t3-framework.org/joomla30/index.php/en/) — Charis, Aug 02 '17 at 11:59
the problem with the script i guess is that put the class 'curent' on "a" tags instead of "li" tags. — Charis, Aug 02 '17 at 12:06

score 6 · Answer 1 · answered Aug 02 '17 at 10:59

$(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>

As you can see on my new menu structure the class="current active" goes to
Hello @anu - I'm really sorry to bother you, but could you take a quick look at my most recent question regarding this topic. You'll probably be able to fix it easily (https://stackoverflow.com/questions/65414249/make-the-change-of-active-class-in-the-menu-more-reliable-when-scrolling) — MedMatrix, Dec 22 '20 at 21:46

Active menu item on page scroll

1 Answers1