【CSS】ナビゲーションを固定する方法

CSSを使って、ナビゲーションをページ上部に固定する方法を紹介します。この指定をすることでスクロールをするのはコンテンツ部分だけで、ナビゲーションを含むヘッダー部分はページ上部に固定されて常に見えている状態となります。

常にページ上部に固定させる場合

ナビゲーション部分を常にページ上部に固定させる場合は、CSSだけで実装することができます。

//HTML
<header>
  <nav id="global-nav">
    <ul>
      <li><a href="#">メニュー1</a></li>
      <li><a href="#">メニュー2</a></li>
      <li><a href="#">メニュー3</a></li>
      <li><a href="#">メニュー4</a></li>
      <li><a href="#">メニュー5</a></li>
    </ul>
  </nav>
</header>

//CSS
header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10000;
}

これで、ヘッダーをページ上部に固定して表示することができます。しかし、このままでは下に続くコンテンツの一部と重なってしまうので、少し手を加える必要があります。

#container {
  padding-top: 150px;
}

このように、ヘッダー部分の高さ分だけ、コンテンツにpadding-topを加えることで重なりを防ぐことができます。

DEMO

途中から固定する場合

スクロールの途中からナビゲーションを固定することもできます。その場合はCSSとjQueryを用いて実装していきます。

$(function() {
  var menu = $('#global-nav'),
  offset = menu.offset();
  $(window).scroll(function () {
    if($(window).scrollTop() > offset.top) {
      menu.addClass('fixed');
    } else {
      menu.removeClass('fixed');
    }
  });
});

まずは、「menu」という変数を作り、そこに「#global-nav」を代入するようにします。これで毎回ID名を記述する面倒はなく、変数を呼び出すだけで済みます。
次に変数「offset」でナビゲーション（#global-nav）の位置情報を代入します。そして、scrollイベントを使って、スクロールした際の処理を指定していきます。
簡潔に言うと、スクロールした距離がページトップとナビゲーション（#global-nav）の距離より大きかったら「fixed」というクラスを付与してナビゲーションを固定し、そうでなければクラスを外すという処理をしています。
addClass()を使って指定した要素にクラスを付与することができます。removeClass()を使って指定した要素からクラスを外すことができます。

CSSに関しては、最初に指定したheaderの部分を削除して、代わりに以下を追加します。

.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}

DEMO

以上が、CSSを使ってナビゲーションを固定する方法となります。これ以外にも左側にナビゲーションを固定して右側にコンテンツを作る2カラムのレイアウトなどデザインパターンはいろいろあります。

常にページ上部に固定させる場合

途中から固定する場合

シェア

おすすめの記事