A Pen by austinicomedez.

index.html

<header class="bar"><h1 class="rotate">Sticky Header</h1></header>
<img class="body-image" src="http://lorempixel.com/700/1000/city/" alt="" />

script.js

$(window).scroll(function() {
//condition for scroll position
    if ($(this).scrollTop() > 1){  
    //make CSS changes here
    $('.bar').addClass("sticky shadow trans minified");
  }
  else{
    //back to default styles
    $('.bar').removeClass("sticky shadow minified");
  }

});

Sticky-Header.markdown

Sticky Header

Simple Sticky Header

A Pen by austinicomedez on CodePen.

License.

style.css

/* structure */
body{background:#FFA500;}
allan-b,.bar{font-family: 'Allan', cursive; font-weight:700;}
allan-r{font-family: 'Allan', cursive; font-weight:400;}
.bar{text-align:center;font-size:55px;color:#555;padding:20px 0;height:55px;text-shadow:0 6px 0 #fff;}
.body-image{margin:0 auto;display:block;}

/* addons */
.bar.shadow{box-shadow:0 0 10px -2px #000;}
.rotate{transform:rotate(-5deg);}
.sticky{position: fixed!important; text-align: center;margin: 0 auto;display: block;width: 100%;background: #fff;text-shadow:0 6px #f1f1f1;}
.trans{transition:height 0.2s ease-in,font-size 0.1s ease-out;}
.minified{height:25px;font-size:30px;}