javascript - Make the change of "active" class in the menu more reliable when scrolling

Question

My issue

I have implemented the code to change "active" class of menu when page scrolling.

Here is the code I use to manage this behavior (extract from main.js file) :

$("a.nav-link").click(function(e){
    $('html, body').animate({
        scrollTop: $(e.target.hash).offset().top - 15
    });  
    $(this).parent().siblings().removeClass('active');
    var $parent = $(this).parent();
    $parent.addClass('active');
});

window.addEventListener('load', () => {
    const headings = document.querySelectorAll('section');
    var topMenu = $(".navbar-nav"),
    topMenuHeight = topMenu.outerHeight()+15,
    menuItems = topMenu.find("a");

    document.addEventListener('scroll', (e) => {
        headings.forEach(ha => {
            const rect = ha.getBoundingClientRect();
            if(rect.top > 0 && rect.top < 150) {    
                if(ha.id != "presentation")
                {
                    const location = window.location.toString().split('#')[0];
                    history.replaceState(null, null, location + '#' + ha.id);
                    //console.log(menuItems.filter("[href='/ea-jamm/#"+ha.id+"']").parent()[0].classList);
                    if(menuItems.filter("[href='/ea-jamm/#"+ha.id+"']").parent()[0].classList.contains("active")){
                    }
                    else
                    {
                        menuItems
                        .parent().removeClass("active")
                        .end().filter("[href='/ea-jamm/#"+ha.id+"']").parent().addClass("active");
                    }
                }
                else
                {
                    menuItems
                    .parent().removeClass("active")
                    const location = window.location.toString().split('#')[0];
                    history.replaceState(null, null, location);
                }
            }
        });
    });
});

You can constat the behavior here : http://mehdigallois.fr/ea-jamm/

However, when i scroll the page very quickly, the change of "active" class in the menu is not reliable and sometimes the first menu item is active while the page is at bottom. (in this case, it is the last menu item h which has to be "active")

How can I make the change of "active" class in the menu more reliable when scrolling quickly ?

(Moreover, when I scroll the page completely at bottom on tablet device (1024 x 1366), the last menu item "Nous contacter" does not have the "active" class : it still the second to last which has the "active" class. Same when i click on the last menu item. (Check the behavior for yourselves.))

Track(s) / Solution(s)

This issue is linked to this another question about "asynchronous panning": "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning"

I can try to:

• implement debouncing aka update the class when the scrolling stops, not while it's occuring

OR

• implement throttle, so it only updates every n milliseconds, not every scroll event

Answer 1

Waitting for answers