Animated Header On Scroll with jQuery That Shrinks

Today, I have developed a small script to create an animated header on scroll with jQuery. To make it more interesting, I will add some text to the header which will resize when the user scrolls down the page.

It is a lightweight solution which allows you to customize according to your wishes. You can easily place navigation links and add logo on the header according to your web design need.

The header provides smooth and nice animation while scrolling the page. Such header perfects if you are working on one-page site.

You can also use this animated header if you want to build a stick header with navbar because It shrinks and stays at the top of the page when scrolling down.

The solution is ready for production sites but its work with the browsers that supports the most recent CSS3 features.

How to Create Animating Header On Scroll with jQuery

To create and quickly implement the solution on your site, you can simply load the both CSS and Jquery file into your webpage.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">

Next, you need to add the markup. To create the markup we simply follow standing div with a class header. To add the content for the rest of the page, We define a div with class content.

<div class="header">
  <h1>Animated Fixed Header (Scroll Down)</h1>
</div>
<div class="content">
	Rest of Content Goes Here
</div>

The Style

Now we will play with Style. To make the header fixed at the top of the page, We will simply use the position fixed with top and left value zero to make it proper align.

We want to header take all over the place that’s why we use the width 100%. We did also apply a nice background color with font color white to make the text look nice.

The height 200px is just according to your choice. You can change it. For animation, We take help of transition element.

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #cc5350;
    color:#fff;
    z-index: 1000;
    height: 200px;
    overflow: hidden;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
    text-align:center;
    line-height:160px;

}

Now we will change the behavior of the animated header when it’s scroll down. What we do it to change the height to make slim and smart when the user scrolls down the page.

We will also change the line-height and font-size. You are noticing a shrink class and this will be handled through Javascript.

.header.shrink {
    height: 100px;
    line-height:80px;
}
.header h1
{
    font-size:30px;
    font-weight:normal;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.header.shrink h1
{
    font-size:24px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

Finally, we have a content area and we setting height 500 just only because you can see the demo work perfectly. You don’t need that and remove the height while implementing on your live site.

.content {
    height: 500px;
    margin-top: 250px;
    text-align: center;
    font-size: 34px;
    line-height: 400px;
}

The Javascript

Last step to initialize the javascript function with the help of document. ready function. We will define the shrink header value 300 and tell the window browser by using the scroll function.

We will simply use the if/else statement to add or remove the class shrink. When the user reaches the browser window value 300, The script will add the shrink class next to header class else it will remove it.

<script>
$( document ).ready(function() {
 var shrinkHeader = 300;
  $(window).scroll(function() {
	var scroll = getCurrentScroll();
	  if ( scroll >= shrinkHeader ) {
		   $('.header').addClass('shrink');
		}
		else {
			$('.header').removeClass('shrink');
		}
  });
function getCurrentScroll() {
	return window.pageYOffset || document.documentElement.scrollTop;
	}
});
</script>

That’s it. It’s simple and easy to use solution to make the header sticky and animated.