Active state on one page navigation JS

window.addEventListener('DOMContentLoaded', () => {

    const sections = document.querySelectorAll('.anchor-section');





    function scrollActive(){

//get vertical scroll distance
        const scrollY = window.pageYOffset;

        sections.forEach(section => {
            var sectionHeight = section.offsetHeight;
            var sectionTop = section.offsetTop - 150;
            var sectionId = section.getAttribute('id');

            var anchor = document.querySelector('#split_menu a[href*=' + sectionId + ']')


            if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){


// add active class to link item that corresponds to the section visible in viewport. whichever anchor section satisfies the condition above, it's going to grab the link anchor for that section and add active class to it

                anchor.classList.add('active');
            }else{
                anchor.classList.remove('active');
            }




        });


    }


    window.addEventListener('scroll', scrollActive);




});