addClass to div on scroll page jquery

Question

I guess I need help. I'm trying to work with jQuery and I don't know much, but I'm having this problem with the "color active" of the menu.

Here is an simplified version of my work: http://jsfiddle.net/paulakfleck/aZGKz/

Here is the whole work (complete): http://nartecrobotica.com.br/g4/

As you can see, when I click in the menu, the "active color" works, but when I scroll the page or open the page, do not.

I guess the big mistake is in this line:

if($(window).scrollTop() == $("#g-4")){...}

I put the #g-4 as an example, but isn't working too.

I try other answers at Stackoverflow, but I'm unable make that work.

Some light, please?

Answer 1

If you want your menu to change as you scroll, you could try this:

$('.grid').each(function () {
    if ($(window).scrollTop() > $(this).position().top - ($(this).height() / 2)) {
        $('.myList a').removeClass('active');
        $('.myList a#menu' + $(this).attr('id').split('-')[1]).addClass('active');
    }
});

Updated your jsfiddle here.

Answer 2

are u looking for this ..

If yes then i am using .offset().top to compare.

one problem that was $(window).scrollTop() gives the scrollbar postion in integer and your divs position is fixed hence you need to do a range check before you apply the class.

Check demo