(function($){
'use strict';
var UAEStickyHeader=function($element){
this.$element=$element;
this.settings=this.getSettings();
this.isSticky=false;
this.lastScrollTop=0;
this.scrollDirection='up';
this.ticking=false;
this.resizeTimer=null;
if(this.settings.enable==='yes'){
this.init();
}};
UAEStickyHeader.prototype={
getSettings: function(){
var stickySettings=this.$element.data('uae-sticky-settings');
if(stickySettings){
if(typeof stickySettings==='string'){
try {
stickySettings=JSON.parse(stickySettings);
} catch (e){
stickySettings={};}}
return {
enable: stickySettings.uae_sticky_header_enable||'',
devices: stickySettings.uae_sticky_devices||['desktop', 'tablet', 'mobile'],
scrollDistance: stickySettings.uae_sticky_scroll_distance||{ size: 100, unit: 'px' },
scrollDistanceTablet: stickySettings.uae_sticky_scroll_distance_tablet||null,
scrollDistanceMobile: stickySettings.uae_sticky_scroll_distance_mobile||null,
transparentEnable: stickySettings.uae_sticky_transparent_enable||'',
transparencyLevel: stickySettings.uae_sticky_transparency_level||{ size: 100, unit: '%' },
backgroundEnable: stickySettings.uae_sticky_background_enable||'',
backgroundType: stickySettings.uae_sticky_background_type||'solid',
backgroundColor: stickySettings.uae_sticky_background_color||'#ffffff',
gradientColor1: stickySettings.uae_sticky_gradient_color_1||'#ffffff',
gradientLocation1: stickySettings.uae_sticky_gradient_location_1||{ size: 0, unit: '%' },
gradientColor2: stickySettings.uae_sticky_gradient_color_2||'#f0f0f0',
gradientLocation2: stickySettings.uae_sticky_gradient_location_2||{ size: 100, unit: '%' },
gradientType: stickySettings.uae_sticky_gradient_type||'linear',
gradientAngle: stickySettings.uae_sticky_gradient_angle||{ size: 180, unit: 'deg' },
borderEnable: stickySettings.uae_sticky_border_enable||'',
borderColor: stickySettings.uae_sticky_border_color||'#e0e0e0',
borderThickness: stickySettings.uae_sticky_border_thickness||{ size: 1, unit: 'px' },
shadowEnable: stickySettings.uae_sticky_shadow_enable||'',
shadowColor: stickySettings.uae_sticky_shadow_color||'rgba(0, 0, 0, 0.1)',
shadowVertical: stickySettings.uae_sticky_shadow_vertical||{ size: 0, unit: 'px' },
shadowBlur: stickySettings.uae_sticky_shadow_blur||{ size: 10, unit: 'px' },
shadowSpread: stickySettings.uae_sticky_shadow_spread||{ size: 0, unit: 'px' },
hideOnScrollDown: stickySettings.uae_sticky_hide_on_scroll_down||'',
hideThreshold: stickySettings.uae_sticky_hide_threshold||{ size: 10, unit: '%' },
hideThresholdTablet: stickySettings.uae_sticky_hide_threshold_tablet||null,
hideThresholdMobile: stickySettings.uae_sticky_hide_threshold_mobile||null
};}
var data=this.$element.data('settings')||{};
return {
enable: data.uae_sticky_header_enable||'',
devices: data.uae_sticky_devices||['desktop', 'tablet', 'mobile'],
scrollDistance: data.uae_sticky_scroll_distance||{ size: 100, unit: 'px' },
scrollDistanceTablet: data.uae_sticky_scroll_distance_tablet||null,
scrollDistanceMobile: data.uae_sticky_scroll_distance_mobile||null,
transparentEnable: data.uae_sticky_transparent_enable||'',
transparencyLevel: data.uae_sticky_transparency_level||{ size: 100, unit: '%' },
backgroundEnable: data.uae_sticky_background_enable||'',
backgroundType: data.uae_sticky_background_type||'solid',
backgroundColor: data.uae_sticky_background_color||'#ffffff',
gradientColor1: data.uae_sticky_gradient_color_1||'#ffffff',
gradientLocation1: data.uae_sticky_gradient_location_1||{ size: 0, unit: '%' },
gradientColor2: data.uae_sticky_gradient_color_2||'#f0f0f0',
gradientLocation2: data.uae_sticky_gradient_location_2||{ size: 100, unit: '%' },
gradientType: data.uae_sticky_gradient_type||'linear',
gradientAngle: data.uae_sticky_gradient_angle||{ size: 180, unit: 'deg' },
borderEnable: data.uae_sticky_border_enable||'',
borderColor: data.uae_sticky_border_color||'#e0e0e0',
borderThickness: data.uae_sticky_border_thickness||{ size: 1, unit: 'px' },
shadowEnable: data.uae_sticky_shadow_enable||'',
shadowColor: data.uae_sticky_shadow_color||'rgba(0, 0, 0, 0.1)',
shadowVertical: data.uae_sticky_shadow_vertical||{ size: 0, unit: 'px' },
shadowBlur: data.uae_sticky_shadow_blur||{ size: 10, unit: 'px' },
shadowSpread: data.uae_sticky_shadow_spread||{ size: 0, unit: 'px' },
hideOnScrollDown: data.uae_sticky_hide_on_scroll_down||'',
hideThreshold: data.uae_sticky_hide_threshold||{ size: 10, unit: '%' },
hideThresholdTablet: data.uae_sticky_hide_threshold_tablet||null,
hideThresholdMobile: data.uae_sticky_hide_threshold_mobile||null
};},
init: function(){
var self=this;
if(!this.isDeviceEnabled()){
return;
}
this.setInitialStyles();
this.bindEvents();
this.checkScroll();
},
isDeviceEnabled: function(){
var currentDevice=this.getCurrentDevice();
return this.settings.devices.indexOf(currentDevice)!==-1;
},
getCurrentDevice: function(){
var width=window.innerWidth;
if(width >=1025){
return 'desktop';
}else if(width >=768&&width < 1025){
return 'tablet';
}else{
return 'mobile';
}},
getScrollDistance: function(){
var device=this.getCurrentDevice();
var scrollDistance=this.settings.scrollDistance;
if(device==='tablet'&&this.settings.scrollDistanceTablet){
scrollDistance=this.settings.scrollDistanceTablet;
}else if(device==='mobile'&&this.settings.scrollDistanceMobile){
scrollDistance=this.settings.scrollDistanceMobile;
}
if(scrollDistance.unit==='%'){
return (window.innerHeight * scrollDistance.size) / 100;
}
return scrollDistance.size;
},
getHideThreshold: function(){
var device=this.getCurrentDevice();
var hideThreshold=this.settings.hideThreshold;
if(device==='tablet'&&this.settings.hideThresholdTablet){
hideThreshold=this.settings.hideThresholdTablet;
}else if(device==='mobile'&&this.settings.hideThresholdMobile){
hideThreshold=this.settings.hideThresholdMobile;
}
if(hideThreshold.unit==='%'){
return (window.innerHeight * hideThreshold.size) / 100;
}
return hideThreshold.size;
},
setInitialStyles: function(){
this.$element.addClass('uae-sticky-header-element');
var currentBg=this.$element.css('background-color');
this.$element.data('original-background', currentBg);
this.$element.css({
'transition': 'all 0.3s ease-in-out'
});
},
applyTransparency: function (){
var opacity=(100 - this.settings.transparencyLevel.size) / 100;
var self=this;
var currentBgColor=this.$element.css('background-color');
var currentBgImage=this.$element.css('background-image');
var hasGradient=currentBgImage&&currentBgImage!=='none';
var blurStyles={
'backdrop-filter': 'blur(10px)',
'-webkit-backdrop-filter': 'blur(10px)'
};
if(hasGradient){
var modifiedGradient=currentBgImage.replace(/#([0-9a-f]{3,6})\b/gi, function (hex){
return self.convertHexToRgba(hex, opacity);
});
modifiedGradient=modifiedGradient.replace(/rgba?\(([^)]+)\)/gi, function(match, values){
var parts=values.split(',').map(function(v){ return v.trim(); });
if(parts.length===3){
return 'rgba(' + parts[0] + ', ' + parts[1] + ', ' + parts[2] + ', ' + opacity + ')';
}else if(parts.length===4){
return 'rgba(' + parts[0] + ', ' + parts[1] + ', ' + parts[2] + ', ' + opacity + ')';
}
return match;
});
this.$element.css($.extend({
'background-image': modifiedGradient
}, blurStyles));
}else if(currentBgColor &&
currentBgColor!=='transparent' &&
currentBgColor!=='rgba(0, 0, 0, 0)'
){
var rgbaColor=this.convertToRgba(currentBgColor, opacity);
this.$element.css($.extend({
'background-color': rgbaColor
}, blurStyles));
}else{
this.$element.css($.extend({
'background-color': 'rgba(255, 255, 255, ' + opacity + ')'
}, blurStyles));
}},
convertHexToRgba: function(hex, alpha){
hex=hex.replace('#', '');
if(hex.length===3){
hex=hex.split('').map(char=> char + char).join('');
}
var bigint=parseInt(hex, 16);
var r=(bigint >> 16) & 255;
var g=(bigint >> 8) & 255;
var b=bigint & 255;
return `rgba(${r}, ${g}, ${b}, ${alpha})`;
},
convertToRgba: function(color, opacity){
if(color.indexOf('rgba')===0){
return color.replace(/[\d\.]+\)$/g, opacity + ')');
}
if(color.indexOf('rgb')===0){
return color.replace('rgb', 'rgba').replace(')', ', ' + opacity + ')');
}
if(color.indexOf('#')===0){
var hex=color.replace('#', '');
var r=parseInt(hex.substring(0, 2), 16);
var g=parseInt(hex.substring(2, 4), 16);
var b=parseInt(hex.substring(4, 6), 16);
return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + opacity + ')';
}
return 'rgba(255, 255, 255, ' + opacity + ')';
},
bindEvents: function(){
var self=this;
$(window).on('scroll.uaeStickyHeader', function(){
self.requestTick();
});
$(window).on('resize.uaeStickyHeader', function(){
clearTimeout(self.resizeTimer);
self.resizeTimer=setTimeout(function(){
self.handleResize();
}, 250);
});
if(window.elementorFrontend&&window.elementorFrontend.isEditMode()){
elementor.channels.editor.on('change', function(model){
if(model.el===self.$element[0]){
self.settings=self.getSettings();
self.checkScroll();
}});
}},
requestTick: function(){
var self=this;
if(!this.ticking){
requestAnimationFrame(function(){
self.checkScroll();
self.ticking=false;
});
this.ticking=true;
}},
checkScroll: function(){
var scrollTop=$(window).scrollTop();
var scrollDistance=this.getScrollDistance();
if(scrollTop > this.lastScrollTop){
this.scrollDirection='down';
}else{
this.scrollDirection='up';
}
this.lastScrollTop=scrollTop;
if(scrollTop >=scrollDistance){
if(!this.isSticky){
this.makeSticky();
}
if(this.settings.hideOnScrollDown==='yes'){
this.handleHideOnScroll();
}}else{
if(this.isSticky){
this.removeSticky();
}}
},
makeSticky: function(){
this.isSticky=true;
this.$element.addClass('uae-sticky--active');
this.applyVisualEffects();
this.$element.css({
'position': 'fixed',
'top': '0',
'left': '0',
'right': '0',
'z-index': '9999',
'width': '100%'
});
this.addPlaceholder();
},
removeSticky: function(){
this.isSticky=false;
this.$element.removeClass('uae-sticky--active uae-sticky--hidden');
this.removeVisualEffects();
this.$element.css({
'position': '',
'top': '',
'left': '',
'right': '',
'z-index': '',
'width': ''
});
this.removePlaceholder();
},
applyVisualEffects: function(){
var self=this;
if(this.settings.backgroundEnable==='yes'){
if(this.settings.backgroundType==='solid'){
this.$element.css('background-color', this.settings.backgroundColor);
this.$element[0].style.setProperty('background-color', this.settings.backgroundColor, 'important');
}else{
var gradient=this.buildGradient();
this.$element.css('background-image', gradient);
this.$element[0].style.setProperty('background-image', gradient, 'important');
this.$element[0].style.setProperty('background-color', 'transparent', 'important');
}}else if(this.settings.transparentEnable==='yes'){
this.applyTransparency();
}
if(this.settings.borderEnable==='yes'){
var borderValue=this.settings.borderThickness.size + 'px solid ' + this.settings.borderColor;
this.$element.css('border-bottom', borderValue);
}
if(this.settings.shadowEnable==='yes'){
var shadowValue='0 ' +
this.settings.shadowVertical.size + 'px ' +
this.settings.shadowBlur.size + 'px ' +
this.settings.shadowSpread.size + 'px ' +
this.settings.shadowColor;
this.$element.css('box-shadow', shadowValue);
}},
removeVisualEffects: function(){
var originalBg=this.$element.data('original-background');
this.$element.css({
'background-color': originalBg||'',
'background-image': '',
'border-bottom': '',
'box-shadow': '',
'backdrop-filter': '',
'-webkit-backdrop-filter': '',
'opacity': ''
});
},
buildGradient: function(){
var type=this.settings.gradientType;
var color1=this.settings.gradientColor1 + ' ' + this.settings.gradientLocation1.size + '%';
var color2=this.settings.gradientColor2 + ' ' + this.settings.gradientLocation2.size + '%';
if(type==='linear'){
return 'linear-gradient(' + this.settings.gradientAngle.size + 'deg, ' + color1 + ', ' + color2 + ')';
}else{
return 'radial-gradient(circle, ' + color1 + ', ' + color2 + ')';
}},
addPlaceholder: function(){
if(!this.$placeholder){
var height=this.$element.outerHeight();
this.$placeholder=$('<div class="uae-sticky-placeholder"></div>').css({
'height': height + 'px',
'visibility': 'hidden'
});
this.$element.after(this.$placeholder);
}},
removePlaceholder: function(){
if(this.$placeholder){
this.$placeholder.remove();
this.$placeholder=null;
}},
handleHideOnScroll: function(){
var threshold=this.getHideThreshold();
if(this.scrollDirection==='down'&&this.lastScrollTop > threshold){
this.$element.addClass('uae-sticky--hidden');
this.$element.css('transform', 'translateY(-100%)');
}else if(this.scrollDirection==='up'){
this.$element.removeClass('uae-sticky--hidden');
this.$element.css('transform', 'translateY(0)');
}},
handleResize: function(){
if(!this.isDeviceEnabled()){
this.removeSticky();
return;
}
if(this.isSticky&&this.$placeholder){
this.$placeholder.css('height', this.$element.outerHeight() + 'px');
}
this.checkScroll();
},
destroy: function(){
$(window).off('.uaeStickyHeader');
this.removeSticky();
this.$element.removeClass('uae-sticky-header-element');
}};
$(window).on('elementor/frontend/init', function(){
var stickyHandler=function($scope){
if($scope.closest('.hfe-site-header, .site-header, header').length > 0){
new UAEStickyHeader($scope);
}};
elementorFrontend.hooks.addAction('frontend/element_ready/section', stickyHandler);
elementorFrontend.hooks.addAction('frontend/element_ready/container', stickyHandler);
});
})(jQuery);