CSS

2021.03.23

【CSS】position: sticky;が効かない時に確認する4つのこと

要素を追従固定させるなら、position: sticky;を使うのが便利ですね。

CSSで指定するだけで追従固定が実現できるので、とても楽で便利ですが、少しミスがあると動かずにハマってしまうテクニックでもあります。

今回はposition: sticky;が動かない時に確認すべきことを4つご紹介します。ハマる前にぜひご確認ください。

position: sticky;が効かない4つの原因

topを指定していない

position: sticky;を指定したら、必ずtopを指定する必要があります。数値はサイトのレイアウトによって変更してください。

②高さが確保されていない

position: sticky;が動かない原因として一番多いのが高さが確保されていないことです。

たとえばレイアウトが2カラムでサイドバーを追従固定させたい時、floatを使って2カラムをつくっていないでしょうか。

以下はfloatを使った2カラムレイアウトに、サイドバーをposition: sticky;で追従固定させる例です。

floatで2カラムをつくった場合

See the Pen サイドバーをsticky: footer;で固定追従(floatだと動かない) by spiqa design (@spiqa_design) on CodePen.

サイドバーは追従固定できていませんね。

検証ツールで見ていただくとわかりますが、追従固定させる要素(.list)の親要素の(.sidebar)には、下までの高さがありません。

floatはカラムごとの高さが左右で合わずバラバラになるので、position: sticky;を指定しても動く高さが確保されていないので、追従できないのです。

flexboxを使用した2カラムならカラムごとの高さが合うので、追従固定された要素が動く高さが確保されます。

以下は上記コードをflexboxに書き換えたものです。

flexboxで2カラムをつくった場合

See the Pen サイドバーをsticky: footer;で固定追従 by spiqa design (@spiqa_design) on CodePen.

検証ツールで見ていただくとsidebarがmainと高さが連動し、下まで伸びているのがわかります。

サイドバーが問題なく追従固定できていますね。

③高さを確保した要素そのものにposition: sticky;をかけている

上記の派生で、ちょっとした凡ミスのお話です。

高さを確保した要素そのものにposition: sticky;を指定していないか確認しましょう。

上記コードの例だとsidebarクラスを指定したdivタグにposition: sticky;をかけてしまっている状態です。

画像のように、sidebarクラスを指定したdivタグはflexによって左のコンテンツと高さが連動し下まで伸びているわけですから、動きません。

高さを確保している要素の子要素(今回の場合はlistクラス)にposition: sticky;を指定します。

sidebarの子要素であるlistクラスを指定したdivタグは、高さが伸びていないため、追従することができます。

当然のことなのですが、ついついやってしまいがちな凡ミスです…。

④親要素にoverflow: hidden;が指定されている

こちらも動かない原因として多いです!

親要素にoverflow: hidden;が指定されていると、position: sticky;が効きませんので、指定されている場合は必ずスタイル削除しておきましょう。

まとめ

大体はこの4つが原因かと思いますので、動かない場合はご確認ください!

ちなみにIE11ではposition: sticky;は効きませんが、「stickyfill」を読み込ませることで効かせることができます。

こちらについても当ブログでご紹介したいと思います。

0

関連記事

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

  • 2021.03.31

    【HTML・CSS】納品前に確認したいコーディングチェックポイント

    CSS

    HTML5

おすすめ記事

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!