jQuery(function ($) {
    var headerNavBoxBg = $('<div class="header-nav-box-bg"></div>');
    headerNavBoxBg.css({
        'position': 'absolute',
        'top': '0',
        'left': '50%',
        'width': $('nav .header-nav-box > .e-con-inner > .elementor-element').width(),
        'height': '100%',
        'transform': 'translateX(-50%)',
        'background': '#fff',
    });

    $('nav .header-nav-box > .e-con-inner').append(headerNavBoxBg)

    $(window).on('scroll', function () {
        var $headerNavBox = $('nav .header-nav-box');

        if ($headerNavBox.hasClass('elementor-sticky')) {
            var scrollTop = $(window).scrollTop();

            var scrollThreshold = 100;

            var stickyOffset = $headerNavBox.offset().top;
            var maxScrollDistance = 300;

            if (scrollTop > scrollThreshold) {
                var scrollProgress = Math.min((scrollTop - scrollThreshold) / (maxScrollDistance - scrollThreshold), 1);
                console.log(scrollProgress);
                
                var newWidth = (50 + scrollProgress * 50) + 'vw';
                
                headerNavBoxBg.css({
                    'width': newWidth,
                });

            }
            
            if(scrollProgress == 1) {
                headerNavBoxBg.css({
                    'box-shadow': '0px 10px 10px -4px rgba(0, 0, 0, 0.1)',
                });
            } else {
                headerNavBoxBg.css({
                    'box-shadow': 'none',
                });
            }
        } else {
            headerNavBoxBg.css({
                'width': $('nav .header-nav-box > .e-con-inner > .elementor-element').width(),
            });
        }
    });
});