Simple Sticky Header

stickheader

JS:

// Get the initial position of the header
var headerStick = $('.header').offset().top;

$(window).scroll(function(){
    $(window).scrollTop() > headerStick ? $('.header,.headerAlias').addClass('active') : $('.header,.headerAlias').removeClass('active');
});

CSS:

.header { width: 100%; height: 80px; background: #FF4444;  }
.header.active { position: fixed;  top:0; margin-bottom: 80px; -webkit-box-shadow: 0 4px 4px -2px #000000; -moz-box-shadow: 0 4px 4px -2px #000000; box-shadow: 0 0px 15px -2px #000000; }
.headerAlias { width: 100%; height: 80px; display: none; }
.headerAlias.active { display: block; }