53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
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(),
|
|
});
|
|
}
|
|
});
|
|
}); |