Introduction To Headroom.js

Difficulty Rating :
Written byAires DaGraca

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 …

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.

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.

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.

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.

Enjoy 😀.

Was this article helpful?

Awesome, follow us on Twitter or Like us on Facebook

Disclosure: Some of the links above are affiliate links meaning at no additional cost to you, I will earn a commission if you click through and make a purchase.

2 Comments

Leave a Comment

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

By visiting iHeartElementor.com you accept our use of cookies and agree to our privacy policy.

Hello, would you like to take a survey before you leave.

Your answers will help us provide more and useful content.
Thank you for your time.