CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのposition: stickyとは？スティッキーナビゲーションバーの作り方を解説

Webサイトでスクロールしても画面上部に固定され続けるナビゲーションバーを見たことはありませんか？あのような動きは、CSSの position: sticky; プロパティを使うことで簡単に実装できます。この記事では、stickyの基本的な仕組みと、実際にスティッキーナビゲーションバーを作成する方法をサンプルコード付きで解説します。

position: stickyの基本

position: sticky; は、通常時は relative と同じように通常の文書フローに従って配置されますが、スクロールして指定した位置（top や bottom などで設定）に達すると、その場に固定される特殊なポジショニングです。

stickyを機能させるためには、top・bottom・left・right のいずれかのオフセット指定が必須である点に注意してください。例えばナビゲーションバーを画面最上部に固定したい場合は、top: 0; を指定します。

スティッキーナビゲーションバーの実装例

以下のコードでは、<ul> 要素に position: sticky; と top: 0; を適用することで、スクロールしても常に画面上部に留まるナビゲーションバーを実現しています。ぜひ実際に動かして挙動を確認してみてください。

<!DOCTYPE html>
<html>
  <head>
    <style>
      ul {
        list-style-type: none;
        position: sticky;
        overflow: hidden;
        top: 0;
        width: 100%;
      }
      li {
        float: left;
        border-right: 1px solid white;
      }
      li a {
        display: block;
        padding: 8px;
        background-color: orange;
      }
      li:last-child {
        border-right: none;
      }
      div {
        padding: 5px;
        margin-top: 5px;
        background-color: white;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href = "#home">Home</a></li>
      <li><a href = "#news">News</a></li>
      <li><a href = "#contact">Contact</a></li>
      <li><a href = "#about">About</a></li>
    </ul>
    <div>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
      <p>固定メニューの動作確認用テキストです。</p>
    </div>
  </body>
</html>

コードのポイント解説

  • position: sticky; と top: 0; … ul要素に対してこの2つを組み合わせることで、スクロール時にナビゲーションバーが画面上部に張り付きます。
  • list-style-type: none; … リストの先頭にある「・」などのマーカーを非表示にし、ナビゲーションバーらしい見た目にしています。
  • float: left; … 各リスト項目（li）を横並びに配置しています。モダンな実装ではFlexbox（display: flex;）を使う方法もおすすめです。
  • height: 1000px; … コンテンツ領域に十分な高さを持たせることで、スクロールした際にstickyの効果がわかりやすくなります。

position: fixedとの違い

似たような挙動をするプロパティ値として position: fixed; がありますが、両者には重要な違いがあります。fixed は最初から常に画面上の指定位置に固定されるのに対し、sticky はスクロールして指定位置に達するまでは通常の位置に表示され、達した時点で固定されるという挙動になります。ページの途中に配置された見出しやサイドバーなど、「ある範囲内でのみ固定したい」要素にstickyは特に有効です。

なお、stickyは主要なモダンブラウザ（Chrome、Firefox、Safari、Edgeなど）で広くサポートされていますが、古いバージョンのInternet Explorerでは動作しないため、対応が必要な場合はフォールバックの検討をおすすめします。

  1. CSSのposition: static;とは？デフォルトの配置方法をわかりやすく解説

    CSSのposition: static;は、要素の位置を「静的（スタティック）」に設定するプロパティ値です。実はこれが、すべての要素に初期状態で適用されているデフォルトの位置指定です。 position: static; の基本的な特徴 position: static;が指定された要素は、通常のドキュメントフローに従って配置されます。ここで重要なポイントは、次のとおりです。 HTMLの記述順序どおりに、上から下へ自然に配置される top・bottom・left・rightプロパティを指定してもまったく効果がない z-indexによる重なり順の制御も適用されない つまり、位置をずらしたい

  2. CSSのposition: fixed;とは？要素を画面に固定する方法を実例付きで解説

    CSSの position: fixed; プロパティを使用すると、要素をビューポート（ブラウザの表示領域）を基準として配置できます。このプロパティが適用された要素は、ページをスクロールしても画面上の同じ位置に固定され続けるのが特徴です。ヘッダーバーやフッター、SNSボタンなど、常に画面内に表示しておきたい要素の実装によく使われます。position: fixed; のサンプルコード以下のコードでは、div要素に対して position: fixed; を設定し、画面右下に固定表示しています。実際にコードを実行して動作を確認してみてください。<!DOCTYPE html> <