犬の手も借りたいあなたに最適な記事を届けます

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

スポンサーリンク

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

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

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

とても簡単なので、この記事を読むだけで第4の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にすることで全体に固定を反映することができます。

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

途中で固定を解除する方法

先ほどの親要素の問題を利用すればよいのです。

解除したい位置で親要素を終了できるように高さを調整するだけです。

最後に

本記事を最後まで読んでくださり、誠にありがとうございます。

とても簡単なので試してみてください!

また、わからないことがあれば、気軽にお問い合わせください。

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です