ساخت هدر چسبنده با CSS3 و jQuery

کد HTML

<header><h1>Sticky Header</h1></header>
<img src="http://img.majidonline.com/pic/316212/stickyheader.jpg" width="782" height="2000" alt="Big Image" />

کد jQuery

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

کد 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;
}

transition: all 0.4s ease;

نتیجه گیری