Sticky header using css3 and jquery

It's very easy to make sticky header, but we think if we use some transition effect when user scroll the window down and change the header style after window scroll down

Demo

Here's example, how it's work

HTML

Here is the html, it's very easy, all we need inside a header like a logo, navigation etc...

<div id="header">
   <!--- logo  --->
    <a href="" id="brand"> Brand Name </a>
    
    <!--- navigation menu  --->
    <a href="#" class="menu">
        <span class="icon-bar icon-bar-top"></span> 
        <span class="icon-bar icon-bar-middle"></span>
        <span class="icon-bar icon-bar-bottom"></span>
    </a>
    
     <!--- navigation Dropmenu  --->
    <ul class="navigation">
        <li><a href="#">Twitter <i class="fa fa-twitter"></i></a></li>
        <li><a href="#">Facebook<i class="fa fa-facebook"></i></a></li>
        <li><a href="#">CSS3 <i class="fa fa-css3"></i></a></li>
        <li><a href="#">HTML5 <i class="fa fa-html5"></i></a></li>
        <li><a href="#">Download <i class="fa fa-download"></i></a> </li>
    </ul>
    
    <div class="navhidediv"></div>
</div>

CSS

<style>
    #header {
    padding: 15px;
    background: #037cd5;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
}

a {
    text-decoration: none;
}
#brand {
    float: left;
    color: #FFF;
    margin-top: 10px;
    font-size: 40px;
}
    #brand span {
    color: #FFF;
}

/*After window scroll css*/
#header.header-fixed {
    padding-top: 5px;
    padding-bottom: 5px;
}

.header-fixed #brand {
    font-size: 30px;
}

/* transition effect */
#brand, #header {
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
}
</style>

jQuery

When then scroll the window is greater than 1, means the user has scrolled downwards then we need to add the class header-fixed to the header for change the header style

$(window).scroll(function() {
    if ($(this).scrollTop() > 1){ 
        $('#header').addClass("header-fixed");
    }
    else{
        $('#header').removeClass("header-fixed");
    }
});

if you like to use this tutorial for your work, you can download it and enjoy...

Demo Download