Elementor Hide Sticky Header on Scroll Down - Show on Scroll Up

No extra plug-ins required! Elementor Pro Required.

Easily make your Elementor sticky header hidden on scroll down, and show while scrolling back up the page.

To begin with, create your header, and make it sticky

It will also need a background color.

Elementor Sticky Header Changes Logo Size and Position


Then, give that header section the CSS ID of ' stickyheaders '

Elementor Hide Header on Scroll Down - Show on Scroll Up

Finally, add this code in an html element

This html element needs to be in the same page as the header. If you create this in a header template, place the html element somewhere in the header template.

<script>

jQuery(document).ready(function($){
var mywindow = $(window);
var mypos = mywindow.scrollTop();
mywindow.scroll(function() {
if (mypos > 40) {
if(mywindow.scrollTop() > mypos)
{
$('#stickyheaders').addClass('headerup');
}
else
{
$('#stickyheaders').removeClass('headerup');
}
}
mypos = mywindow.scrollTop();
});
});
</script>


<style>
#stickyheaders{
-webkit-transition: transform 0.34s ease;
transition : transform 0.34s ease;
}
.headerup{
transform: translateY(-110px); /*adjust this value to the height of your header*/
}
</style>

That's it! If your section is the initial one in the page or template.

If your sticky header is not the very first section of the page or template, you will need to modify

if (mypos > 40) {

to the approximate height, in PX, of the bottom of your sticky header from the top of the page. example:

if (mypos > 740) {

Et Voila! Simple!

When you know the code... let me know if you need help!

Leave a Reply

Your email address will not be published. Required fields are marked *