Change active class on navigation buttons while scrolling using data-scroll-call

[mmilde]

I'm using data-scroll-call to switch on/off .active class on the buttons in my navigation.

I am not a programmer and not very familiar with JS, but somehow I manage to make it work..

The problem is that for some reason data-scroll-call is triggered twice - first when the element enter the viewport and receive class .is-inview, and next time when the element leave the viewport (the class .is-inview is removed from the element) - the corresponding button gets again .active class.

I am assuming that the problem is in my "If - statements" but don't know how to configure it.

My scrolling container is grid based and I remove all margins and padding and use only grid-gap for spacing between sections. The navigation has data-scroll-sticky, so it can be stick while the scroll container is scrolled. Here is my code: https://codepen.io/mmilde/pen/gOvNxwQ

<div data-scroll-container>

    <div data-scroll data-scroll-repeat="true" data-scroll-section id="scroll-target" class="page-section">

        <ul data-scroll data-scroll-repeat="true" data-scroll-sticky data-scroll-target="#scroll-target">
            <li id="nav-btn-1" class="active">
                <a href="#category-lst" id="last-btn" data-scroll-to="">Last</a>
            </li>
            <li id="nav-btn-2" class="">
                <a href="#category-old" id="old-btn" data-scroll-to="">Old</a>
            </li>
            <li id="nav-btn-3" class="">
                <a href="#category-arc" class="" id="archive-btn" data-scroll-to="">Archive</a>
            </li>
            <li id="nav-btn-4" class="">
                <a href="#category-plg" class="" id="playground-btn" data-scroll-to="">Playground</a>
            </li>
        </ul>

        <div class="scroll-container">

            <section data-scroll="" data-scroll-repeat="true"  data-scroll-call="lst_pr" id="category-lst"></section>

            <section data-scroll="" data-scroll-repeat="true"  data-scroll-call="old_pr" id="category-old"></section>

            <section data-scroll="" data-scroll-repeat="true"  data-scroll-call="arc_pr" id="category-arc"></section>

            <section data-scroll="" data-scroll-repeat="true" data-scroll-call="plg_pr" id="category-plg"></section>

        </div>

    </div>

</div>

window.addEventListener("load", () => {
    const scroll = new LocomotiveScroll({
        el: document.querySelector('[data-scroll-container]'),
        smooth: true,
        scrollFromAnywhere: true,
        multiplier: 1,
        getDirection: true,
        reloadOnContextChange: true,
        touchMultiplier: 3,
        smoothMobile: 0,
        smartphone: {
            smooth: !0,
            breakpoint: 766
        },
        tablet: {
            smooth: !0,
            breakpoint: 1010
        },
    });

    scroll.on("call", callValue => {
        if (callValue === "lst_pr") {
            navBtn1.classList.add("active");
        } else {
            navBtn1.classList.remove("active");
        };

        if (callValue === "old_pr") {
            navBtn2.classList.add("active");
        } else {
            navBtn2.classList.remove("active");
        };

        if (callValue === "arc_pr") {
            navBtn3.classList.add("active");
        } else {
            navBtn3.classList.remove("active");
        };

        if (callValue === "plg_pr") {
            navBtn4.classList.add("active");
        } else {
            navBtn4.classList.remove("active");
        };
    });
    });

    const navBtn1 = document.getElementById("nav-btn-1");
    const navBtn2 = document.getElementById("nav-btn-2");
    const navBtn3 = document.getElementById("nav-btn-3");
    const navBtn4 = document.getElementById("nav-btn-4");

If anyone is able to help me with this will be very much appreciated! I have to upload the project as soon as possible and this is the only issue left to be fixed.