Animated Header On Scroll with CSS3 & jQuery

We know that the fixed header with scrolling body content area is most popular nowadays in web designing. But if we make animated header & resize on-scroll it will enhance the beauty of any website.

There are many ways to create a nice looking header of the website. One creative way to make it resize while scrolling the page to the down.

In this post, I will create an animated header on-scroll which will stay fixed but when the user scrolls the mouse, it will automatically resize.

This fixed header will resize all elements on the header which includes text, logo and navigation items. The process of resizing will be done though CSS3 animation and bit of jQuery.

Furthermore, resizing happens in a way so it looks nice and clean. Each and every inner element will adjust their size with a smooth transition.

To create a simple fixed header or navigation can be easily done with CSS only but to resize it when scroll, we need to help with both CSS3 animations and JQuery.

Both menu links and a logo will nicely animated and change its sizing on the scroll. Once a certain amount of the page obtains scrolled, the header will certainly decrease its size and the inner element may adjust their font size/line-height.

The animated resizing header on the scroll is a neat touch to sites that have simple navigation menus. The site header combined with a sticky navigation bar to provide a smooth user experience towards the user while the user scrolls down to the page.

Let’s get started by taking a look at what we should achieve our goal.

How to Create On-Scroll Animated Header

First of all, it’s important to note that this functionality has a fixed-position header. Intended for browsers that don’t help fixed positioning, or even are buggy within its implementation, you need to consider a fallback.

To test compatibility, visit Can one Use but you can also use the classic.js javascript collection for quickly adding/removing or checking involving classes on elements from the DOM.

Let’s now examine our HTML markup of the shrinking header on the scroll. The markup has a header with a logo and some sections involving text, and a footer.

The HTML Markup is very simple and easy to understand. It contains a div of class .header With one HTML tag H1.

We divided the header part into two parts. One-half will have a logo and the second one have the navigation menu. When user Scroll the Header, it will animate both logo and menu elements.

<div class="header">
    <div class="container">
        <div class="column col-half">
            <h1>FIXED</h1>
        </div>
        <div class="column col-half">   
            <nav>
                <a href="#">Features</a>
                <a href="#">Offers</a>
                <a href="#">About</a>
                <a href="#">Shop</a>
            </nav>
        </div>
    </div>
</div>

We might need to add another div of class .content which would basically have the content of a page. To make sure the scroll appears on the page, I would need to add padding-top:225px;

<div class="content">
	<div class="container">
    	<!--Content Goes Here-->
    </div>
</div>   

CSS for Animated Header

To begin, the CSS is standard. We have a header that usually stuck to the top of the page using top and left. Its width placed to 100%, and I’ve trained with a height involving 200px.

Our z-index retains it above anything else, and we likewise give it a CSS3 transition property to ensure that when it re-sizes, it can so smoothly.

Also, we’ll give a shrink class definition in this CSS, in addition to under this, our header should have its re-sized properties.

When the header provides the class of shrink, it will re-size. This class is going to be added on scroll (as we’ll see from the JavaScript later).

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

}
.header.shrink {
    height: 75px;
    line-height:normal;
}

There are few styles need to add the logo and navigation links. We have applied some general style to logo text and also add transition element so it looks nice while scrolling down.

Similar, the menu links require doing styling to make it look like the demo. We apply some color, text-transform, font-weight, text-shadow, and few others.

.header h1 {
	line-height: 200px;
    color: #fff;
    float: left;
    font-size: 4em;
    letter-spacing: 4px;
    margin: 0;
    text-transform: uppercase;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
nav a {
	position: relative;
	display: inline-block;
	margin: 15px 16px;
	outline: none;
	color: #fff;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	text-shadow: 0 0 1px rgba(255,255,255,0.3);
	font-size: 1.35em;
	line-height:170px;
	-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

nav a:hover,
nav a:focus {
	outline: none;
}

The Javascript

Now we are going to add JavaScript so the class shrink will be added when the user On-Scroll the page and remove in a normal position. This will allow us to animate the header and we will able to set the different height for both positions.

$( 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;
    }
});

In JavaScript, we check a scroll function. We set distance of 300 to be our marker intended for when the header may re-size and animate.

If the scroll distance from the Y direction is more than this value, we add the particular class shrink to the header. If it’s less than or equal to this particular amount, we get rid of the class of shrink class.

Conclusion

That’s all we need to do. It’s time to finalize our this tutorial, it depends on upon you how you would like to change the sizes, dimensions, and content of the header and then implement into your website.

By using out the method, you can easily implement this solution in your upcoming projects. Thanks for reading and free to see the demo and download source code.

I will appreciate if you leave comments and share with your friends.

You Might Be Interested In: