onscroll change header

by Keval Bhatt

HTML

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

CSS

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

header.sticky {
  font-size: 18px;
  line-height: 0px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}
header{
    
    transition: all 0.4s ease;
}

JavaScript

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