Animated Sticky Header On Scroll with CSS3 & JavaScript

In this post, I will show you how you can create easily animated sticky header on the scroll which builds with CSS3 and JavaScript only. You don’t need to apply to third-party services or jQuery.

You have seen many different header or navigation designs which stay fixed at top of the page and animated on a scroll but such examples only possible with both CSS & jQuery.

But how about creating a similar kind of header with the help of CSS & JavaScript?

In our previous tutorial, I did create a great example of  On-Scroll Animated header which resizes and automatically adjust the different elements on the header.

But here we are not going to resize any of navigation part. We will create a big header part which will have some important information that you want to show to your site visitor.

When the user scrolls down the page, the header part goes hide with smooth animation then the navigation bar will go up and fixed at the top of the page.

The navigation bar will stay at the top until the user scrolls down all the page. When the user moves back to the top of the page, they can see the whole big header and navigation underneath.

Start with Animated Sticky Header On Scroll

Let’s first see the Markup, and we start with HTML. Its simple, all we need is a header tag and place h1 inside the header. Similarly, inside nav tag, we have navigation links.

<header>
<h1>Sticky Header</h1>
<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Gallery</a>
  <a href="">Contact</a>
</nav>
</header>

Under the header part, we have a wrapper for the rest of the content. We define the section for each set of block content where you can place the content.

<div class="wrapper">
    <section id='steezy'>...</section>
    <section id='real'>....</section>
    <section id='big'>....</section>
</div>

Apply CSS3 Styling

We have styled the body and add padding-top according to our header size. In our case, we have 200px of padding-top because we have 200px header size. You can set custom padding property as you need.

body {
  background-color: #ecf0f1;
  font-family: helvetica, arial, sans-serif;
  font-size: 16px;
  padding-top: 200px;
  margin:0;
  -moz-transition: padding-top 0.5s ease;
  -o-transition: padding-top 0.5s ease;
  -webkit-transition: padding-top 0.5s ease;
  transition: padding-top 0.5s ease;
}

As you can see, we have set the height to 200px. If you change this height, you also need to take care of padding-top for the body.

For the header, We also used the transition similar to the body.

header {
    background-color: #7aa464;
    height: 200px;
    overflow: hidden;
    position: fixed;
    text-align: center;
    top: 0;
   -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
    width: 100%;
}

For sticky, we change the padding-top in this case because on the sticky position, We will have a smaller height of the header. We also modify the height to 60px to keep the header smaller.

At the sticky position we don’t need to show the header logo, so we need to hide it by using of transform scale CSS3 property.

body.sticky-header {
  padding-top: 100px;
}
body.sticky-header header {
  height: 60px;
  background-color: #7aa464;
}
body.sticky-header header h1 {
  -moz-transform: scale(0, 0);
  -ms-transform: scale(0, 0);
  -webkit-transform: scale(0, 0);
  transform: scale(0, 0);
}

The JavaScript

We use the simple JavaScript function to handle the stick. The function will do two things. First, it will allow us to set the scroll position and second, it allows to add or remove the sticky-header to the body.

$( document ).ready(function() {
  $(window).scroll(function(){
    var winTop = $(window).scrollTop();
    if(winTop >= 30){
      $("body").addClass("sticky-header");
    }else{
      $("body").removeClass("sticky-header");
    }//if-else
  });//win func.
});//ready func.

Don’t forget to insert the main jQuery (a JavaScript library) file into your project.

You Might Be Interested In: