Highlighted submenu item

Hello,

I am using the following code to highlight a submenu item when we reach that particular section:

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('a').removeClass('active-menu-item');                    
                    menu.find('a[href="#' + jQuery(this).attr('id') + '"]').addClass('active-menu-item');
                }
            });
        });
    });
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

It works fine, but this is only for the .avia-section class. I also use the grid in pages. The grid layout has .av-layout-grid-container class.

I cant get it to work for both sections. How can I do this?