position: sticky;が効かない時にチェックする3つの項目。|デザイナー、コーチ、ディレクターズメモ|井川igawa.

Memo

position: sticky;が効かない時にチェックする3つの項目。

sticky

position: sticky;が効かない時にチェックする3つの項目。

便利な「position: sticky」

サイドバーをスクロールの途中で固定させたい場合、以前はJavaScriptなどを組み合わせなければ実装できなかった。それが「position: sticky」の登場により、CSSだけで可能になった。


「position: sticky」使用時の注意点。

CSSの仕様を踏まえておく。

ただし単にサイドバーに「position: sticky」だけを指定しても、何も変わらない。

CSSの仕様上、「position: sticky」を使用する時は、、、

  1. 「position: sticky」の親要素に「overflow: hidden、 scroll、 auto、 overlay」のいずれかが指定されていないか?
  2. 「position: sticky」と一緒に、「top、 right、 bottom、 left」のいずれかが指定されているか?
  3. 「position: sticky」と一緒に、高さ(height)が指定されているか?

が、必要となる。


「position: sticky」の実装例。

mainタグとasideタグで2カラムにする場合。

例えば一般的なブログのような2カラムにする場合は、以下の通りで実装できる。そしてサイドバーになるasideを「sticky」にする。

HTML
<div>
 <main>メインコンテンツなど</main>
 <aside>サイドバーなど</aside>
</div>
CSS
div {
 display: flex;
}
main {
 width: 70%;
}
aside {
 position: sticky;
 top: 50px;
 width: 30%;
 height: 100%;
}

チェックする3項目。

今回の例では、mainとasideをdivで囲み、「display: flex」を指定している。これで子要素のmainとasideがFlexアイテムとなり、自動的に2カラムになる。

チェックする項目としては、、、

mainとasideの親要素を確認する。

親要素(上記の例ではdiv)の指定を確認。
  • divに、「overflow」が指定されていないか?
  • 「hidden、scroll、auto、overlay」 の値が指定されていると、CSSの仕様上、「position: sticky」は機能しない。

asideに「position: sticky」と、「top」などを指定されているか?

今回の例では、「top: 50px;」を一緒に指定。
  • 「top、 right、 bottom、 left」のいずれかを併用する必要があるため。

asideに高さを指定されているか?

今回の例では、「height: 100%;」を指定。
  • 「position: sticky」を指定した要素に高さが指定されていないと、やはりCSSの仕様上、機能しないため。

sticky

参考:MDNさま 開発者向けのウェブ技術 > CSS: カスケーディングスタイルシート > position

当サイトでも実装しています。
参考になれば幸いです。


疲れた時は、栄養を。
ポスト投函で届く、人気のブドウ糖です。
砂糖の代わりにコーヒーや紅茶などに。

Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真や動画はフリー素材、購入素材、もしくは自前のものを使用しております。

井川 宜久 | Norihisa Igawa
デザイナー、ディレクター、講師、コーチ / 井川宜久

お問い合わせ CONTACT..

    Name(required)お名前 (必須)
    Furigana(required)ふりがな (必須)
    Email(required)メールアドレス (必須)
    Phone Number(required)電話番号 (必須)
    Message(required)ご質問・ご要望 (必須)


    免責事項について

    • 事実や経験、調査や検証を基にしていますが、私はただの人間です。万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。
    • 万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。