5/5

Introduction To Headroom.js

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

For those that are not pro member and cannot create your own custom header. You can still use this if your theme uses traditional html semantic tags like header. In this case you would use this script.

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

Enjoy 😀.

Related Articles

How To Turn A Section Into A Carousel

Greeting All, In this tutorial I am going to show you how you can turn...

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile...

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this...

How to Create A CSS Arrow

Greetings All, For this brief tutorial I will show you how to create a css...

2 Comments

Leave a Reply

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

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?

newsletter

Subscribe to get notified and receive a special invite.