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


Here's example, how it's work


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>
     <!--- 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>
    <div class="navhidediv"></div>


    #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;


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){ 

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

Demo Download

Copyright 2023 by All Rights Reserved.