【CSSのみ】Stickyでサイドバーに目次を固定。スクロール追尾

2021-08-30

WEBサイトの右側や左側にサイドバーを設けて、

自身のSNSリンクやプロフィールと共にその記事の目次を載せて尚且つ、スクロールしても目次だけは途中から固定する方法をお教えします。

JavaScriptを使わずにCSSだけで簡単に行うことができます！

とても簡単なので、この記事を読むだけで第４のpositionであるStickyをマスターできます。

~目次~

position:sticky

CSSにposition:stickyを書くだけで要素を途中から固定することができます。

本記事もそのレイアウトを採用しています。

まずは、完成例を見せたいと思いますので、下の方までスクロールしてください。

右側に目次が現れ、最下部に行くまでずっと着いてきます。

これがStickyの力です。

position:　stickyとfixed

positionには、relative,absolute,fixed,stickyとあります。

その中でも、fixedとstickyは似ています。

二つとも要素を指定した位置に固定し続けます。しかし大きく違う点が一つだけあります。

fixedは、記事を開いてからずっと永遠にその位置にいます。何があっても動くことはありません。

stickyは任意のタイミングで好きな場所に固定し、また、任意のタイミングで固定を解除することができます。

CSS　Stickyの書き方

書き方は簡単です。

nav{position:sticky;
    top;0;/*固定したい位置*/
    left:0;/*固定したい位置*/
}

これだけです。

stickyの基本はrelativeなので本来あるべき位置に固定されます。

そして、それが指定した、TOP:0；LEFT:0;に来た時にその場で固定されます。

うまく固定されない時

しかし、うまく固定されないことがあります。なんならうまく固定されないことがとても多いです。

それは、一つStickyの特徴を理解していないからです。

それもしっかり説明します。

<header>
   <p>タイトル</p>
   <nav>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
   </nav>
</header>
<style>
nav{position:sticky;
    top;0;/*固定したい位置*/
    left:0;/*固定したい位置*/
}
</style>

という風に、ヘッダーの直下のリストをスクロールして追尾したい場合が多く、こういうコーディングをする人が多くいます。

しかし、これでは固定されません。理由はStickyのルールが一つあるからです。

親要素の範囲内で固定

私も当時たくさんのサイトを探しましたが、これを書いているサイトはありませんでした。

いろいろ検証してこのルールを知ることができました。

Stickyは指定した要素の親要素の範囲内で固定されます。

<header>
   <p>タイトル</p>
   <nav>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
   </nav>
</header>
<style>
nav{position:sticky;
    top;0;/*固定したい位置*/
    left:0;/*固定したい位置*/
}
</style>

この場合は、<nav>が＜header＞の中で固定されますので、

画面から<header>が消えると固定は解除されます。

なので、このやり方を成功したい場合、

<header>
   <p>タイトル</p>
</header>
<body>
   <nav>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
   </nav>
</body>
<style>
nav{position:sticky;
    top;0;/*固定したい位置*/
    left:0;/*固定したい位置*/
}
</style>

このように親要素をbodyにすることで全体に固定を反映することができます。

もう少しわかりやすいように画像で説明します。