AppyKit - Frames

							
// frame-1 start
function frame_1() {

	let doc = document;

	const content = doc.querySelector('.main__content');
	const header = doc.querySelector('.main__fixedHeader');
	let headerHeight = header.scrollHeight;
	let halfHeaderHeight = headerHeight / 2;

	window.addEventListener('scroll', function() {
		
		if (window.matchMedia('(max-width: 991px)').matches) {

			let headerPos = -pageYOffset;

			header.style.willChange = 'transform';
			header.style.transform =
			header.style.WebkitTransform =
			header.style.MsTransform =
				`translate3d(0, ${headerPos}px, 0)`;

			content.style.marginTop = headerHeight + 'px';

			if (pageYOffset >= halfHeaderHeight) {

				header.style.transform =
				header.style.WebkitTransform =
				header.style.MsTransform =
					`translate3d(0, ${-halfHeaderHeight}px, 0)`;

				if(pageYOffset  >= headerHeight  ) {
					header.style.display = 'none';
				}else {
					header.style.display = 'block'
				}

			}

		}

	});
}
frame_1();
// frame-1 end

							
// frame-3 start
(function frame_3() {

	var content = document.querySelector('.main__content');
	var header = document.querySelector('.main__fixedHeader');
	var headerHeight = header.scrollHeight;
	var halfHeaderHeight = headerHeight / 2;

	const footer = document.querySelector('.main__footer');

	let footerHeight = footer.clientHeight;
	footer.style.display= 'none';
	content.style.marginBottom = footerHeight + 'px';



	window.addEventListener('scroll', function() {

		if (pageYOffset < headerHeight) {
			header.style.display = 'block';
			footer.style.display= 'none';
		}
		else {
			header.style.display = 'none';
			footer.style.display= 'block';
		}
		
		if (window.matchMedia('(max-width: 991px)').matches) {

			content.style.marginBottom = 0 + 'px';

			let headerPos = -pageYOffset;

			header.style.willChange = 'transform';
			header.style.transform =
			header.style.WebkitTransform =
			header.style.MsTransform =
				`translate3d(0, ${headerPos}px, 0)`;

			content.style.marginTop = headerHeight + 'px';

			if (pageYOffset >= halfHeaderHeight) {

				header.style.transform =
				header.style.WebkitTransform =
				header.style.MsTransform =
					`translate3d(0, ${-halfHeaderHeight}px, 0)`;

				if(pageYOffset  >= headerHeight  ) {
					header.style.display = 'none';
				}else {
					header.style.display = 'block'
				}

			}

		}

	});
	
})();
// frame-3 end

// frame-4 start
(function frame_4(){

	try {
		var content = document.querySelector('.main__content');
		var footer = document.querySelector('.main__footer');

		var footerHeight = footer.clientHeight;
		content.style.marginBottom = footerHeight + 'px';

	}catch(err){
		return false
	}
	
	if (window.matchMedia('(max-width: 991px)').matches) {
		content.style.marginBottom = 0 + 'px';
	}

})();
// frame-4 end