Advance Elementor STICKY HEADER: Hide Header on SCROLL DOWN and Show On SCROLL UP

[@thecreativarena]

Copy and paste Code Below /* Sticky background color */ selector.elementor-sticky--effects{ background-color: #6f1b9b !important } selector{ transition: background-color 1s ease !important; } /* Show and Hide Sticky Header on scroll */ var prevScrollpos = window.pageYOffset; var header = document.getElementById("header-hide"); var headerHeight = header.offsetHeight; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { header.style.top = "0"; } else { header.style.top = "-" + headerHeight + "px"; } prevScrollpos = currentScrollPos; } /* Show and Hide Sticky Header Speed Control */ #header-hide { transition: all .4s ease!important; }

[@mahbuburrahman9555]

I was looking for tutorial on this topic for last few days and Finally got it. thanks a to you. your tutorials r really helpful❤

[@thecreativarena]

Glad you found what you were looking for!

[@huongmoc_furniture]

Thanks you!

[@GodPleaseforgiveme]

it so perfect bro

[@nagulshareefshaik]

Nice Brother 👍👍

[@GbengaSaviour]

Nice 🎉

[@NatachaCattin]

Thank you very much for this code. It works great on Chrome and Firefox, but there is a problem on Safari when scrolling up on the top of the page.

[@mishamim19]

Would you please share a full website design tutorial with elementor pro page builder? Thanks

[@thecreativarena]

yes i will do so soon

[@nagulshareefshaik]

Extention Name Please for Device Preview Checking ?

[@thecreativarena]

you can check this video it contains other good extension i use as well kzbin.info/www/bejne/qGLOi2iDq5qfoKM

[@nagulshareefshaik]

@@thecreativarena Ok ... Tanq 💐💐