monolith920
11/10/2017 - 8:35 PM

Transition Header

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');
	}
}