gistfile1.txt

class ShrinkingHeader {

	constructor() {
		this.header = {
			header: document.querySelector('.header'),
			headerWrap: document.querySelector('.header-wrap')
        };
    }
	toggleHeader(currentState){
		const scrollValue = window.pageYOffset;
		const thresholdValue = 300;
		if (scrollValue >= thresholdValue) {
			this.header.headerWrap.classList.add('shrink');

			// If On Mobile
			if (currentState.currentBreakpoint === 'small') {
				if (!currentState.mobileNavigation) {
					this.getScrollDirection((val) => {
						let showHide = (val) ? this.header.header.classList.remove('off-screen') : this.header.header.classList.add('off-screen');
					});
				}
				if(currentState.mobileNavigation) {
					this.getScrollDirection((val) => {
						let showHide = (val) ? this.header.header.classList.remove('off-screen') : this.header.header.classList.remove('off-screen');
					});
				}
            }
        }
		if (scrollValue < thresholdValue) {
			this.header.headerWrap.classList.remove('shrink');

			// If On Mobile
			if (currentState.currentBreakpoint === 'small') {
				if (!currentState.mobileNavigation) {
					this.getScrollDirection((val) => {
						let showHide = (val) ? this.header.header.classList.remove('off-screen') : this.header.header.classList.add('off-screen');
					});
				}
				if(currentState.mobileNavigation) {
					this.getScrollDirection((val) => {
						let showHide = (val) ? this.header.header.classList.remove('off-screen') : this.header.header.classList.remove('off-screen');
					});
				}
            }
		}
	}
	getScrollDirection(callback) {
		const scrollableElement = document.getElementsByTagName('body')[0];
		let startingPosition;
		let endPosition;
		function setDeltas(event) {
			let delta;
			let val;


			// This event is specific to iOs
			if (event.changedTouches) {
				endPosition = event.changedTouches[0].clientY;

				if (startingPosition > endPosition) {
					val = false;
					callback(val);
				}

				else if (startingPosition < endPosition) {
					val = true;
					callback(val);
				}
			}
			//end of IOS event

			if (event.changedTouches === null || event.changedTouches === undefined) {
				if (event.wheelDelta) {
					delta = event.wheelDelta;
				} else {
					delta = -1 * event.deltaY;
				}
				if (delta < 0) {
					// Scroll Direction is Up
					val = false;
					callback(val);
				} else if (delta > 0) {
					// Scroll Direction is Down
					val = true;
					callback(val);
				}
				return val;
			}
		}
		function setInitial(event) {
			startingPosition = event.changedTouches[0].clientY;
		}

		scrollableElement.addEventListener('mousewheel', setDeltas);
		scrollableElement.addEventListener('touchmove', setDeltas);
		scrollableElement.addEventListener('touchstart', setInitial);
	}
}

module.exports = new ShrinkingHeader();