Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML

How to Hide/Reveal Header Notification Bar on Scroll with JavaScript

by
Read Time:6 minsLanguages:

In a previous tutorial, we learned how to hide and reveal a sticky header on scroll. Today, let's build something similar: a sticky header whose top part (the notification header bar) will disappear on scroll down and appear on scroll up. 

What We’re Building

Here’s what we're going to create (scroll to test the behavior):

Let’s get started!

1. Begin With the Page Markup

The header will consist of two parts: the top and bottom.

  1. The top part will contain a special notification about free shipping and the contact info. 
  2. The bottom part will contain the company logo and menu. By default, the menu won’t appear.
The header layoutThe header layoutThe header layout

This header structure is common, especially on eCommerce stores. The header/notification bar is used to notify users about special discounts, promotions, delivery info, and other things. They play a very important role as they are the very first thing a visitor sees on the website. A smart notification bar can attract more shoppers and boost sales.

Roxxe - Responsive Multipurpose Shopify ThemeRoxxe - Responsive Multipurpose Shopify ThemeRoxxe - Responsive Multipurpose Shopify Theme
Multiple menu bars shown on Shopify theme Roxxe

Beyond the header, just to create enough scrolling for testing the effect, we’ll also specify some dummy sections. 

Here’s the header markup:

2. Define Some Helper Classes

For the sake of simplicity, we’ll only discuss the styles related to the header. You can examine all the project styles by clicking the CSS tab of the demo project.

To style the header, we’re going to need some helper classes. Rather than including a CSS framework like Tailwind, let’s define these classes by ourselves:

3. Specify the Header Styles

On small screens (<600px), the header layout will look like this:

The header layout on mobile screensThe header layout on mobile screensThe header layout on mobile screens

On screens between 600px and 899px, its layout will appear as follows:

The header layout on screens between 600px and 899pxThe header layout on screens between 600px and 899pxThe header layout on screens between 600px and 899px

Finally, on larger screens (≥900px), it will have the following appearance:

The header layout on large screensThe header layout on large screensThe header layout on large screens

Let’s take note of the main styles:

  • Both the top and bottom parts will be fixed positioned elements and for flexibility reasons, they won’t have a static height.
  • The bottom part will be positioned right underneath the top part. As we’ll see in a bit, we’ll use JavaScript to calculate its top property value.
  • As we’ve already said, by default, the menu will be invisible. On screens up to 899px, it will be positioned absolutely, while on larger screens, it will be part of the normal document flow.

Here are the associated styles:

4. Add the JavaScript

For the next step let’s add some behavior to the header.

Calculate the Offsets

When the DOM is ready and when we resize the browser window the calculateOffsets() function will fire. 

This function will be responsible for setting the top property value of the bottom header part and the padding-top property value of the body. These actions are necessary as both header parts are fixed elements, so they are completely removed from the normal document flow.  

Here’s the required JavaScript code: 

Toggle Menu

Each time we click on the toggle button, the menu’s visibility will change. If it’s hidden, it will appear, and vice versa.

Here’s the related JavaScript code:

And the styles:

Toggle Header Bar

Now for the primary target of this tutorial.  

Each time we scroll down, the header bar should smoothly disappear and come back into view as we scroll back up.

To implement this we’ll follow the same pattern as we did in the previous tutorial, thus we’ll borrow a decent amount of code from it.

Regarding the functionality:

  • As we scroll down, the body will receive the scroll-down class. At this point, the top bar will be animated to the top and become hidden. At the same time, the bottom part will be animated upwards and occupy the empty space, plus we’ll recalculate the padding-top property value of the body
  • As we scroll up, it will receive the scroll-up class. Note that we won’t need this class, yet it will be at our disposal if we want to modify the demo styles through CSS later. At this point, we’ll remove the CSS transforms from the header parts and again recalculate the padding-top property value of the body
  • If we scroll to the top of the page, it will lose its scroll-up class.

Here’s the (quite extensive!) JavaScript code to handle all this stuff:

And the associated styles:

Conclusion

That’s it, folks! During this exercise, we learned how to toggle a notification bar depending on the scrolling direction. You can utilize this effect primarily in eCommerce stores to create smart header bars that will increase your sales and make conversions.

Let’s look again at what we built today:

As always, thanks a lot for reading!

More Sticky Tutorials

Stick around! There’s plenty more to learn about sticky behavior in web design:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.