前の記事と似た感じですが、個人的に割りと好きなスクロールしたらヘッダーをコンパクトにして固定させるというやつです。CSSの書き方で色んなパターンが出来ます。

スクロールしたらクラスを追加

javascriptはヘッダーにクラスを付けるだけです。

$(function() {
  $(window).on('scroll', function() {
    if ($(this).scrollTop() > 50) {
      $('.header').addClass('fixed');
    } else {
      $('.header').removeClass('fixed');
    }
  });
});

固定さたい.fixbarが上から50pxの位置にあるので、その分スクロールしたらヘッダー用のレイヤーに.fixedを追加します。

CSSで固定方法を変える

あとはCSSの書き方次第で色々調整が出来ます。
ヘッダーの内容にabsoluteやfixedがはいってもいいように、コンテナ用のレイヤーには必要な分の高さを指定しておきます。

Test1 シンプルに固定

スクロールしたら.fixbarだけを固定します。

テストページ

.header {
  background-color: #f5f5f5;
  height: 100px;
}
.header .fixbar {
  position: absolute;
  background-color: #f0f0f0;
  width: 100%;
  top: 50px;
}
.header.fixed .fixbar {
  position: fixed;
  top: 0px;
}

Test2 ヘッダー全体に背景を使う

Test1の場合.fixbarとそれ以外で背景が分かれているので、背景をヘッダー全体になじませる例です。

テストページ

.header {
  height: 100px;
}
.header .fixbar {
  position: absolute;
  background-image: url('images/bg01.png');
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,.2), 0px -1px 5px 1px rgba(255,255,255,1) inset;
  width: 100%;
  padding-top: 50px;
}
.header.fixed .fixbar {
  position: fixed;
  margin-top: -50px;
}

あらかじめpadding-top: 50px;で上に余分な背景を作っておいて、レイヤーが固定されたら余分な50px分margin-top: -50px;で画面外にあげます。

Test3 下にもヘッダー内容がある場合

.fixbarより下にもヘッダー内容がある場合の例です。

そのままスクロールすると下の内容が重なってスクロールされるので、.header.fixedになったら消えるようにしておきます。アニメーションとか入れるとチョットいい感じ(•ө•)ﾉ

テストページ

.header {
  height: 150px;
}
.header .fixbar {
  position: absolute;
  background-image: url('images/bg01.png');
  box-shadow: 0px 1px 1px 0px rgba(0,0,0,.2), 0px -1px 5px 1px rgba(255,255,255,1) inset;
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
  transition: padding-bottom 0.2s ease 0s;
}
.header.fixed .fixbar {
  position: fixed;
  margin-top: -50px;
  padding-bottom: 0px;
}
.header .header_bottom {
  /* 出てくる時のアニメーション設定 */
  transition: margin-top 0.4s ease 0s, opacity 0.4s ease 0.2s;
  opacity: 1;
}
.header.fixed .header_bottom {
  /* 消える時のアニメーション設定 */
  transition: margin-top 0s ease 0s, opacity 0.4s ease 0s;
  margin-top: -120px;
  opacity: 0;
}

display:noneだとアニメーションが付けられないので、margin-topとopacityで擬似的に消しています。