Over the past a couple weeks I noticed a similar question about how to make the header show/hide as the user scrolls up and down the page. 

So in this tutorial we are going to accomplish just that. But before we begin lets get the important stuff out the way.

My staging environment.

Theme: Hello Theme

Elementor Version: Pro ( required for this tutorial  )

Additional Plugin: Simple Custom CSS & JS ( Very helpful if you do not want to mess with theme files )

Let’s begin.

I am going to assume you have already created your header Elementor Pro. Before we get to far ahead you need to edit that template and give it the id of …

my_header

Next we need to install and activate our Additional Plugin. Simple Custom CSS & JS will keep you from having to play with the theme files and make this integration so much easier.

Welcome Headroom.js

Headroom.js is a jQuery plugin that when included to a website correctly will manipulate your header based on whether or not the user is scrolling up or down the page.

Adding Headroom to your website

To add Headroom.js to your website we need to link the files via cdnjs.com. These are the two links we will be using.

<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/headroom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.9.4/jQuery.headroom.js"></script>

To include these files we need to go to Simple Custom CSS & JS and select Add Custom HTML. 

Paste these two files below the comments and give it a descriptive title.

Save it.

Next we need to add the jQuery to get things working.

Select Add Custom JS and paste this script below the comments.

Please note that the id we created in he beginning is included in the script so if you  used a different id be sure to change here also.

jQuery(document).ready(function( $ ){
     $("#my_header").headroom();
});

Please make sure you choose to add this script to the footer.

The CSS Magic

For things to work we need to add some css so things look and work as they should. I added a boxed shadow to the fixed state but you can remove it to add a border or something.

.headroom {
position: fixed;
width:100%;
will-change: transform;
transition: transform 350ms linear!important;
z-index: 1000;
}


.headroom--unpinned {
 transform: translateY(-100%);
}
.headroom--pinned {
transform: translateY(0%);
-webkit-box-shadow: 0px 6px 18px -3px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 6px 18px -3px rgba(0,0,0,0.4);
box-shadow: 0px 6px 18px -3px rgba(0,0,0,0.4);
}

I recommend you add this CSS to your customizer or child theme CSS. If you have followed the tutorial correctly you see the fruits of your labor on the frontend.

The final result..

Enjoy

Additional Tips

jQuery(document).ready(function( $ ){
    $("header").headroom();
});

Enjoy 😀.