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 😀.

By Aires Dagraca

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

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 a one column section in a carousel slider you can be proud of. Here is what you will be creating. Responsive and functional carousel. There…

How to Make A Horizontal Scrollable Mobile Menu

Greetings Everyone, This short tutorial will shed some light on how to replicate the mobile menu seen on Elementor website. See the image below to see what I am referring to. My working environment Theme: Hello Theme Elementor Version: Pro…

How To Wrap Text In Elementor

Greetings All. This brief tutorial will touch on a subject I was asked about this week concerning a simple way of wrapping text around an image. So after some experimenting and trying multiple methods this is the solution I found…

2 Comments

Leave a Reply

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

Become a Premium Member and get full access to exclusive courses and templates.

Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
Key Elements provides a unique collection of tutorials, tips, & courses for Elementor Theme Builder. From advanced to basic tutorials we have something for everyone.
Share on facebook
Share on twitter
Share on linkedin
Account
  • Privacy Policy
  • Terms & Conditions
Pages
  • Articles
  • Resources
Important
  • About
  • Contact
©2018 - 2020 Key Elements, All Rights Reserved
newsletter

Subscribe to get notified and receive a special invite.

Feedback
Powered by Elementor Pro

How happy are you with Key Elements?