Scroll offset changing menu item class

Question

I have a page in Magento with all the categories and products listed. On top I have a menu with the categories and the items you scroll by must get a class so I can change the color.

I have this script at the moment:

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('ul.nf-category-menu li a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('ul.nf-category-menu li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

But the class is changing from div to div to soon, can I give some offset so the class will be added later?

Update:

It's no changing the "active" class to soon when te title is 150px away from the top, I would like to change the class around 80px from top.

Regards,

I assume you are looking for a delay, so did you check the setTimeout option in jQuery yet? — Levano

n00bly n00bly · Accepted Answer · 2017-08-17T07:51:49

I already fixed it, it was quite simple after trying some things. This is how it was done:

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('ul.nf-category-menu li a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top+243 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('ul.nf-category-menu li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}

if (refElement.position().top had to be changed to: if (refElement.position().top+243 where 243 is the amount of pixels of the offset.

Scroll offset changing menu item class

1 Answers