How To Create Header That Appears Only When Scroll Up

In your site, you might want to focus the header area of your site, maybe the menu. As for example, if you have magazine sites then, maybe you want to display the menu when the user scrolls up else you may not want to. Similarly, for the Business sites too, you may want to achieve the same. However, you might not know about how to achieve it for your site. Well, do not worry onto this. We have got you covered up. Here, we will learn about how to create header that appears only when scroll up via HeadroomJS library.

What is headroomjs?

Well, headroomjs is Javascript/jQuery library which can make any area of your site to be displayed when user scrolls up. However, out of the box it will not do so. It will just add the class when user scrolls up, in which we need to add CSS code for that effect. You can find more details on it in their site: headroomjs as well as in their Github repo.

As we are here learning about how to create header that appears only when scroll up, from the description, we can find out that we can use it to achieve the same for our site. So, let’s move ahead and learn about how to do it for your site, shall we?

How to create header that appears only when scroll up?

First of all, for this to work out, you need to find the exact class or id within the site in which you need to apply this behavior in your site. For this, you can do Inspect Element via browser console to find it out. You can learn more on this here: Apply Custom CSS Code In Your Site Via Inspect Element.

Now, you need to download the headroomjs from their site, and extract it inside the theme folder where ever appropriate. After you have downloaded it, you need to enqueue it in your WordPress theme via wp_enqueue_scripts hook. Also, you need to add custom JS for it to work for your site too. Hence let’s enqueue this library file as well as the custom JS file too within the theme.

For the enqueue process, just paste the below PHP code in the functions.php file of the theme:

Here, along with the headroomjs, we are also enqueueing jQuery headroomjs too, which enables you to apply it with jQuery code too, instead of only vanilla JS, ie, core JS code.You can learn about enqueueing scripts in WordPress here: Enqueue Custom CSS And JavaScript Libraries In WordPress.

Now, let’s move ahead and add the required custom JS and CSS code to create header that appears only when scroll up, shall we?

Required custom JS and CSS code to create header that appears only when scroll up

Now after you have included the required headroomjs library file and custom JS file too, you just need to add the JS setting for it and CSS to make it appear on scroll up. Here, since it will first of all need JS setting, we will add it up first. So, open up your custom JS file and add the below jQuery code into it:

Here, in the above JS code, you can see that we have taken the class of .main-navigation to make the menu appear on scroll up in your site. You can take whatever as needed for your site. You can see on it about how we have taken it in our site:

As you might have noticed that, applying only the JS out of the box did not worked out for you, right? Well as stated previously, you need to add Custom CSS code for it to work. So, let’s dive ahead and add the required CSS code for this effect, shall we?

For the CSS code, open up your style.css file of the theme and paste the below CSS code inside it where ever required:

Here, in the above CSS code, you can see that we have touched 2 class, namely: .headroom--pinned and .headroom--unpinned. Well, the first ones class will be added when you scroll up your browser and the second ones will be added when you scroll down the page. So, we have applied the CSS in same way, ie, when first class is fired, we have added to display the navigation and for the second once, we have removed it from display.

And if you want to add some effect onto that then, you can try the below CSS code instead:

In this way of implementation, you can now successfully implement to create header that appears only when scroll up.

Output of how to create header that appears only when scroll up

You can see the output of it in your site too as in the below screenshot:

There, in the above provided screenshots, you can notice that in each of the screenshot, we have highlighted the class area. If you notice, you can see that there is class change in it, which we have described earlier and applied CSS code to perfectly match this behavior for the site.

You may also want to read:

  1. How To Open WordPress Menu Items In New Tab/Window
  2. Change Thumbnail Image Gallery Size In WordPress
  3. Add Theme Support For JetPack Infinite Scroll
  4. Extend Customizer Options To Include Radio Image Option
  5. Creating Contact Us Page Via Contact Form 7 Plugin

Conclusion

If you have followed up the tutorial properly and now can easily create header that appears only when scroll up within your site then, we can say that you are now more familiar on this than before. However, if you are still confused on the same and want to know more about it then, do drop the comment below in the comment box and we will follow it up.

Post navigation

Bishal Napit

Bishal Napit is a WordPress theme developer from Tansen, Palpa, with a passion to learn more on WordPress.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.