jQuery highlight menu item when scrolled over section

Question

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

This is what my menu looks like:

<div id="navbar">
          <ul class="nav navbar-nav">
            <li class="active"><a data-id="home" href="#home">Home</a></li>
            <li class="navbar-right"><a data-id="cont" href="#contact">Contact</a></li>
            <li class="navbar-right"><a data-id="exp" href="#exp">Expertise</a></li>
            <li class="navbar-right"><a data-id="wie2" href="#wie2">Wie</a></li>
          </ul>
</div>

In the html for every section where I use the id anchor I added class="section"

This is my jQuery:

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 >= target) {
                jQuery('#navbar>ul>li>a').removeClass('clicked');
                jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked');
            }
        });
});

Anyone has any idea why the class get deleted everytime? becuase when I comment out jQuery('#navbar>ul>li>a').removeClass('clicked'); it works great. The classes are being added correctly. But removing them doesn't work :(

Have a look at https://stackoverflow.com/q/32395988/5247200 – David Aug 08 '18 at 20:23 — David, Aug 08 '18 at 20:23

score 1 · Answer 1 · answered Apr 29 '16 at 13:58

Havent tested this, but i think this should work

  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');
            jQuery('#navbar ul li a[data-id=' + id + ']').removeClass('clicked');
            if (position >= target) {
                jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked');
            }
        });

});

score 0 · Answer 2 · edited May 02 '16 at 08:08

0

I think because: #navbar>ul>li>a is not the same as #navbar ul li a

The first is trying to find direct <ul> child to #navbar and the second is asking to find a <ul> child (at any level) under #navbar and the same goes for the rest of the selector.

Have a look here

The child combinator (E > F) can be thought of as a more specific form of the descendant combinator (E F) in that it selects only first-level descendants.

edited May 02 '16 at 08:08

Mr Lister

45,515
15
108
150

answered Apr 29 '16 at 13:44

Tarek N. Elsamni

1,718
1
12
15

**does not fixes the issue**. – Roko C. Buljan Apr 29 '16 at 13:45
So what didn't fix the issue !? can you tell me what you did !! – Tarek N. Elsamni Apr 29 '16 at 13:47
Did you mean that this doesn't work: jQuery('#navbar ul li a').removeClass('clicked'); – Tarek N. Elsamni Apr 29 '16 at 13:48
@TarekN.Elsamni not the syntax but just the line of code. When I comment it out the classes are being added correctly when I undo the comment the classes aren't being added they get constantly removed – Frank Lucas Apr 29 '16 at 13:52

score 0 · Answer 3 · answered Apr 29 '16 at 13:52

Hard for me to tell exactly what the issue is without being able to dig through the actual code, but you could try updating this line:

jQuery('#navbar>ul>li>a').removeClass('clicked');

to:

jQuery('#navbar').find('clicked').removeClass('clicked');

That way you are for sure going to be removing the class "clicked" from only link that already has the class "clicked" before reassignment.

I would also recommend checking out bootstrap's scrollspy feature. It sounds like it does what you are trying to achieve. You could either try implementing it instead, or digging into their code and see how they are approaching it and learn something new.

http://getbootstrap.com/javascript/#scrollspy

Hope this helps!

score 0 · Answer 4 · edited May 08 '18 at 18:01

0

I think the problem is that position >= target only adds the active class if the user has scrolled below the top of the section, so this will add the class even if the user has scrolled beyond the entire section.

Change

if (position >= target)

to

if (position >= target && position < target + $(this).height())

appears to solve the problem.

edited May 08 '18 at 18:01

Roshana Pitigala

8,437
8
49
80

answered May 08 '18 at 17:07

aut cum scuto aut in scuto

1

score 0 · Answer 5 · answered Jan 03 '19 at 16:19

hi with small change it worked without any issues

  jQuery(window).scroll(function () {
  var position = jQuery(this).scrollTop();
  var classSet = 0;

  jQuery('.section').each(function() {
      var target = jQuery(this).offset().top;

      var id = jQuery(this).attr('id');
      if (classSet == 0)
        jQuery('#navbar ul li a[data-id=' + id + ']').removeClass('clicked');
      if (position >= (target - 200) && position < target + $(this).height()) {
          jQuery('#navbar ul li a[data-id=' + id + ']').addClass('clicked');
          classSet = 1;
      }
  });

});

jQuery highlight menu item when scrolled over section

5 Answers5