スクロールしたらヘッダーが出てくるやつの備忘録

初期時にはヘッダーを表示せず、少しスクロールしたところでヘッダーを出すというプログラムです。
これにより、メインビジュアルを全面に表示することができ、インパクトのあるWebサイトを作成することが出来ます。

<div class="header">ヘッダー</div>

.header{
	position:fixed;/*ここが重要箇所*/
	display:none;/*ここが重要箇所*/
　　　　/*以下はレイアウト用*/
	top:9%;
	left: 50%;
    　　transform: translate(-50%, -50%);
    　　-webkit-transform: translate(-50%, -50%);
    　　-ms-transform: translate(-50%, -50%);
	width:85%;
	height:120px;
	background:white;
	border-radius:60px;
}

//ヘッダースクロール
$(window).scroll(function () {          
  var pos = $('body').offset();         
  if ($(this).scrollTop() > pos.top) {
    $('.header').fadeIn();                
  } else {                              
    $('.header').fadeOut();              
  }
});