Animated Sticky header on Scroll with CSS3 and Javascript

Animated Sticky header on Scroll

We have seen different many headers which animated on a scroll and with CSS only or sometime Jquery but how about creating one with CSS3 & Javascript?

In this post, We will show you how to make the sticky header on scroll with demo and step by step guide for implementation.

There are many ways to create and design header and one of the previous tutorial was about making a standard header with a navigation bar which shows on scroll down the page.

Today, we are going to make another one but this time we are going to do something different. We do make the sticky header which fixed at the top of the page, but we do hide the logo area with beautiful animation.

When the user scrolls down the page, the header part goes hide with animation then the navigation bar will be fixed at the top.

The navigation 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 header and navigation underneath.

The Markup

Let’s first see the Markup, and we start with HTML. The HTML is simple, all we need is a header HHTML5 element and place h1 inside the header.

We have nav HTML5 element and inside nav, 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>

The Styles

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.

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

Code ExamplesYou May Also Like