http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/

<header><h1>Sticky Header</h1></header>
<img src=”large-image.jpg” width=”782″ height=”2000″ alt=”Big Image” />

The jQuery

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

The CSS

header{
  position: fixed;
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
}

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}