Check if scrolling is happening. Add a body class if scrolling happend. Style each state and have fun.
// Header Transitions
function headerTransitionEvents() {
var scrollHappened = false;
/*Initial*/
var scrollDistance = jQuery(document).scrollTop();
if (scrollDistance > 0 && scrollHappened == false) {
scrollHappened = true;
// if(window.innerWidth > '999')
transitionHeader(1);
}
/*On Scroll*/
jQuery(window).scroll(function() {
var scrollDistance = jQuery(document).scrollTop();
if (scrollDistance > 0 && scrollHappened == false) {
scrollHappened = true;
// if(window.innerWidth > '999')
transitionHeader(1);
} else if(scrollDistance == 0 && scrollHappened == true) {
scrollHappened = false;
// if(window.innerWidth > '999')
transitionHeader(0);
}
});
}
//Header Transition States
function transitionHeader(state) {
if(state == 1) {
jQuery('body').removeClass('header-transition-false');
jQuery('body').addClass('header-transition-true');
}
else {
jQuery('body').addClass('header-transition-false');
jQuery('body').removeClass('header-transition-true');
}
}