[jquery]ある程度スクロールしたら非表示にしていたヘッダーを表示させる

<script>
$(function() {
 var nav = $('#header-item');
 //スクロールが400に達したらクラスを付与
 $(window).scroll(function () {
  if ($(this).scrollTop() > 400) {
   nav.addClass('header-item-height');
  } else {
   nav.removeClass('header-item-height');
  }
 });
});
</script>

#header-item {
 height: 50px;
 overflow:hidden;
}
.header-item-height {
height: 80px;
}

上記コードでユーザが400pxより下にスクロールすると、header-item部分が50pxから80pxになる

またユーザが400pxよりも上にスクロールするとheader-item-heightクラスが削除されてheader-item部分が50pxに戻る