Adding class to element with JS on a WordPress+Elementor website

I’m using JS to add a CSS class to an HTML element in conjunction with Elementor but it’s not working. The code is inserted in the footer of the page using script tags.

Here is the code:

<script type="text/javascript">
    /*position fixed-menu on scroll*/
        
    if( $('.site-header').hasClass('header-layout3') ){
      var hdrOuter = '.site-header.header-layout3';
      var fixHandle = '.site-header .site-main-nav-wrapper';    
    }else{
      var hdrOuter = '.site-header .lite-nav-wrapper';
      var fixHandle = '.site-header .lite-nav-wrapper';
    }

    //sticky menuy for mobile device
    if ($(window).width() <= 768){

        var hdrOuter = '.lite-mob-outer';
        var fixHandle = '.lite-mob-outer';
    }

      var getHeaderHeight = $(hdrOuter).outerHeight();
      var lastScrollPosition = 0;
      
      $(window).scroll(function() {
        var currentScrollPosition = $(window).scrollTop();
        
        if ($(window).scrollTop() > 2.3 * (getHeaderHeight) ) {

          $(fixHandle).addClass('menu-fixed-triggered');

          if (currentScrollPosition > lastScrollPosition) {
          $(fixHandle).removeClass('menu-fixed');
          }else{
            $(fixHandle).addClass('menu-fixed');
          }
          lastScrollPosition = currentScrollPosition;
        } else {
          $(fixHandle).removeClass('menu-fixed');
          $(fixHandle).removeClass('menu-fixed-triggered');
        }
        
      });
    </script>

And this is the element it should be adding a class to:

<header class="elementor-element elementor-element-c4e8bd8 e-con-full site-header elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-parent e-lazyloaded" data-id="c4e8bd8" data-element_type="container" id="masthead" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
    <div class="elementor-element elementor-element-928b162 e-con-full lite-nav-wrapper e-flex e-con e-child" data-id="928b162" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}">
    </div>
</header>