STICKY HEADER - SCALING

by bizamajig

HTML

<div class="header"><h1>Sticky Header</h1></header>

CSS

body {
    height:1000px;
    width:100%;
    background-color:#F0F0F0;
}

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

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

JavaScript

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

$('.header').hover(function() {
    $('.header').removeClass("scroll");
  }, function() {
    if($(window).scrollTop() > 1) {
      $('.header').addClass("scroll");
    }
  }
);