ページをある程度スクロールした後に別のページを見たくなる時があります。
そういうときにグローバルナビゲーションをページ頭に固定表示させていると次に行きたい場所へ誘導しやすくなります。
今回はスクロールしてナビゲーションが見えなくなったら固定ナビゲーションを表示させるパターンを書いていきます。

デモページを作成しましたのでこちらからご確認ください。
DEMO

HTML

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

<div id="nav">
  ナビゲーション
</div>

<div class="box">
  コンテンツ
</div>

<div class="box">
  コンテンツ
</div>

<div class="box">
  コンテンツ
</div>

<div class="box">
  コンテンツ
</div>

<div id="footer">
  フッター
</div>

CSS

.clone-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  transition: .3s;
  transform: translateY(-100%);
}
.is-show {
  transform: translateY(0);
}

Javascript

$(function() {
  var $win = $(window),
    $cloneNav = $('#nav').clone().addClass('clone-nav').appendTo('body'),
    showClass = 'is-show';

  $win.on('load scroll', function() {
    var value = $(this).scrollTop();
    if ( value > 300 ) {
      $cloneNav.addClass(showClass);
    } else {
      $cloneNav.removeClass(showClass);
    }
  });
});

#navのナビゲーションのクローンを作成してそのクローン（.clone-nav）を固定表示させるイメージです。
300の値を変更すれば上から降りてくるタイミングを調整することができます。

こちらのサイトを参考にして作成しました。
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 | NxWorld