Hi there… I would like to share some knowledge here (hope THEMECO dont mind) about creating a nice behavior to our Header in X Pro only. Example : www.thefutur.com
First, go to Theme Option and open Choose:
Global JS:
(function($){
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$(’.x-masthead’).removeClass(‘nav-up’).addClass(‘nav-down’);
} else {
$(’.x-masthead’).removeClass(‘nav-down’).addClass(‘nav-up’);
}
lastScrollTop = st;
});
})(jQuery);
and then open Global CSS
.x-masthead .x-bar-is-sticky {
transition: all 0.35s ease-in;
}
.x-masthead.nav-up .x-bar-is-sticky{
opacity: 1;
transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d;
}
.x-masthead.nav-down .x-bar-is-sticky{
opacity: 0;
transform: translate3d(0px, -100px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
transform-style: preserve-3d;
}
Hope this is work for you guys!!
Sincerely
Ady