Add active class to menu on scroll point or id as well as on click

Question

I am trying to get the menu items to get the "active" class not only when they are clicked on but also when scrolled to the id's of #main, #features etc. Right now I have some jquery that adds an active class and removed it from other menu items on click, but as soon as a scroll obviously that menu item stats active, as its only working on clicks and not scroll points.

<ul id="menu-main-menu" class="nav navbar-nav">
  <li class="menu-item"><a title="Home" href="#main">Home</a></li>
  <li class="menu-item"><a title="Features" href="#features">Features</a></li>
  <li class="menu-item"><a title="About" href="#about">About</a></li>
  <li class="menu-item"><a title="Contact us" href="#fill">Contact us</a></li>
</ul>

The theme i bought is using stellar.js and I think this is the js creating scroll points:

jQuery('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

    var target = jQuery(this.hash);
    target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
        jQuery('html,body').animate({
            scrollTop: target.offset().top - 100
        }, 1000);
         return false;
    }
}
});

I just need this to add an active class to my menu and remove it from other items but also on scroll point or target id. Any help would be much appreciated please :)

Updated code I am playing with, not working properly:

jQuery('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {

    var target = jQuery(this.hash);
    target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
        jQuery('html,body').animate({
            scrollTop: target.offset().top - 100
        }, 1000);

        jQuery(".menu-item a").removeClass("active");

        target.addClass("active");
        target.hasClass("active").find(this).addClass("active");

        return false;
    }
}
});

Kolby · Answer 1 · 2014-10-30T20:02:38.373

win.scroll(function(e){
    jQuery.each(items, function(key, value){
        var item = jQuery(value);
        if(win.scrollTop() >= item.offset().top){
            jQuery('.menu-item a.active').removeClass('active');
            var id = item.attr('id');

            jQuery.each(navItems, function(key, value){
                var navItem = jQuery(value);
                if(navItem.attr('href') == '#'+id) navItem.addClass('active');
            });
        }
    });
});

Sorry I misunderstood your question. I think this is what you're looking for: http://jsfiddle.net/pnsxg2zh/

So basically on scroll I get the scroll position of the window, and then use offset().top to find the position of the elements you want to scroll to. I check if the window's scroll position is >= the top of the element, if it is I add the active class to the nav item who has the href equal to the id of that element.

I tried your script exactly like that, it doesnt do anything? Its not adding class active to the li or a tag — dreamsynk, Oct 30 '14 at 08:51
ohhh sorry I misunderstood your question. I'll update my answer shortly — Kolby, Oct 30 '14 at 19:39

score 0 · Answer 2 · edited May 23 '17 at 12:20

0

so you need to add class "active" when menu-item is clicked and the element (#main and other) is visible on the screen.

to add "active" class on clicked, do this:

jQuery('.menu-item').click(function(){
    jQuery('#menu-main-menu li').removeClass('active');
    jQuery(this).removeClass('menu-item').addClass('menu-item active');
});

to check element visibility please read this post

Check if element is visible after scrolling

edited May 23 '17 at 12:20

Community

1
1

answered Oct 30 '14 at 09:18

Jimmy Febio

24
5

Hey, the click part i have already exactly like you have it there, its the visible on screen part, i had a look at the link you sent me, my js is terrible, i cant figure out what is going on there? – dreamsynk Oct 30 '14 at 09:27
I updated a piece of code i would imagine should work but i am doing something wrong, it basically is using the current themes code adding class active to target and then i am trying to get it to check if that target has class active it adds it to the menu item, prehaps its better to do this by matching the id with the hash in the menu item? – dreamsynk Oct 30 '14 at 09:40
so you want to add ".active" to tag a inside li ?? – Jimmy Febio Oct 30 '14 at 16:13
any way... your code is triggered under click event, so it would not give you any effect when you scroll the page.. you must find the way to get parameter that indicated that the element currently being shown on the screen.. – Jimmy Febio Oct 30 '14 at 16:22

Add active class to menu on scroll point or id as well as on click

2 Answers2