当サイトではグローバルナビゲーションを上部に固定表示させるスティッキーヘッダーを実装しています。

スティッキーヘッダーを設定すると、縦に長いページでもナビゲーションが隠れてページ移動が不便になることはありません。特にスマートフォンサイトでは有効です。

スティッキーヘッダーはjQueryでスクロールの量に応じて、HTMLのclass属性を操作することで実現させます。

class属性を操作するHTMLの確認

ナビゲーション部分のコードは以下のようになっています。このコードのnav要素をスクロールしても上部に固定表示させます。

<nav class="navbar navbar-default" role="navigation">
  <div class="container">
<!-- 省略 -->
 </div>
</nav>

スティッキーヘッダーを実装するjQueryのコード

$(document).ready(function () {
    $('.navbar').each(function () {
        var $window = $(window),
            $header = $(this),
            headerOffsetTop = $header.offset().top;
        $window.on('scroll', function () {
            if ($window.scrollTop() > headerOffsetTop) {
                $header.addClass('sticky');
            } else {
                $header.removeClass('sticky');
            }
        });
        $window.trigger('scroll');
    });
});

jQueryのコードの解説

$(document).ready(function () {
    $('.navbar').each(function () {
<!-- 省略 -->
});

この部分はhtmlの中から.navbarを探して、その要素に対して以降の処理を実行します。

$(document).ready(function () {
    $('.navbar').each(function () {
        var $window = $(window),
            $header = $(this),
            headerOffsetTop = $header.offset().top;
<!-- 省略 -->
});

この部分は必要となる要素を変数に格納しています。
3行目はJavaScriptのWindowオブジェクトをjQueryオブジェクト化しています。4行目は変数$headerに.navbar(thisは.navbar)のjQueryオブジェクトを入れています。5行目はoffset()メソッドでjQuery要素のドキュメント上の位置を取得しています。offset()メソッドはtop(ドキュメント上端からの距離)とleft(ドキュメント左端からの距離)という2つのプロパティを持っています。今回はtopを指定して変数headerOffsetTopにドキュメントの上端の距離を入れています。

[adsense]

$window.on('scroll', function () {
   if ($window.scrollTop() > headerOffsetTop) {
       $header.addClass('sticky');
<!-- 省略 -->        
});

この部分はスクロールイベントが発生した時に以降の処理を実行します。

$window.on('scroll', function () {
   if ($window.scrollTop() > headerOffsetTop) {
     $header.addClass('sticky');
　} else {
     $header.removeClass('sticky');
<!-- 省略 -->
});

2行目はウィンドウがナビゲーションの初期状態の位置よりも下へスクロールされたらという条件式です。scrollTop()メソッドは要素が縦方向にどれだけスクロールされたかを調べることができます。
2行目の条件式を満たせば、3行目で.stickyクラスを追加します。4行目、5行目は満たさなければ逆に.stickyクラスを削除します。

$(document).ready(function () {
<!-- 省略 -->
        $window.trigger('scroll');
    });
});

この部分はスクロールした状態でブラウザをリロードした時などに、スクロールイベントの発生を.triggerメソッドでブラウザに伝えています。

最後にjQueryで追加した.stickyクラスにCSSを設定します。

.sticky {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  border-bottom: 2px solid #333;
}

.stickyのCSSは高さやカラーなども調整するとサイトによっては見やすくなると思います。