Hide based on HTML Element on screen position

<h1>Hiding the sticky footer on mobile, with enquiry form in viewport</h1>
<script>
window.addEventListener("scroll", function() {listenScrollDk();},false);

function listenScrollDk(){
	console.log('listenScrollDk');
	if (window.innerWidth <1024){
		console.log('width < 1024');
		var heightFromTop = document.getElementById('contact').getBoundingClientRect().top;
		if (heightFromTop <= 200){
			document.querySelector('.sticky-footer-wrapper').style.opacity = "0";
			console.log('sticky hide');
		}
		else{
			document.querySelector('.sticky-footer-wrapper').style.opacity = "1";
			console.log('sticky show');
		}	
	}
	else{
		console.log('else condition');
		document.querySelector('.sticky-footer-wrapper').style.opacity = "1";
	
	}
}
</script>

Posted

in

by

Tags: