Nice Animated Resizing Header on With CSS3 & Jquery

nice-scroll-animated-header

The CSS3 sticky header is most popular nowadays in web designing. But if we make it animated & resize on-scroll it will enhance the beauty of any website.

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.

The navigation menu on the header will also animated when a header will resize. Not only this but also the inner element will automatically adjust their size with a transition.

Both menu links and a log 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 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.

Let’s Started with 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 Markup

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>   

The CSS3

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.

Final Words.

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.

Code ExamplesYou May Also Like