Full Width Sub Menu problem with active-menu-item

I’ve built a page with a Fullwidth Sub Menu (Enfold 4.5), and the menu items are links to anchors in the content below, on the same page.

I’m able to style the submenu items on :hover, but how can I get the active menu item to be styled differently than the rest (different color and background-color), when the page is scrolled to that anchor point, whether by clicking on the submenu item or just by scrolling? Already tried the following, and no luck:
Add this in my function.php :

//One page nav highlight
 
function activateMenuItem(){
?>
<script>

jQuery(document).scroll(function() {
     var sections = jQuery('.avia-section'),
         menu   = jQuery('.av-submenu-container'),        
         nav_height = menu.outerHeight();
 

         jQuery(window).on('scroll', function() {
            var cur_pos = jQuery(this).scrollTop();
            sections.each(function() {
                var top = jQuery(this).offset().top - 300,
                    bottom = top + jQuery(this).outerHeight();
                if (cur_pos >= top && cur_pos <= bottom) { 
                    menu.find('li.active-menu-item').toggleClass('active-menu-item');                    
                    menu.find('a[href="https://'+window.location.host+window.location.pathname+'#' + jQuery(this).attr('id') + '"]').parent("li").toggleClass('active-menu-item');
                }
            });
        });
    });
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

and also this CSS :

/* Fullwidth Sub Menu - Indicator */
.av-subnav-menu > li:hover  {
    border-bottom: 2px solid #ed1c23;
}
.av-subnav-menu > li.active-menu-item {
    border-bottom: 2px solid #ed1c23;
}

Thanks in advance.