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 25/05/2021 in Javascript by Denis Tags:
Posted 25/05/2021 in Javascript by Denis
Posted 25/05/2021 in Javascript