first commit

wp-content/themes/hello-elementor/assets/js/custom.js

@@ -0,0 +1,53 @@
+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(),
+            });
+        }
+    });
+});