スタッフブログ

こんにちは。フロントエンドエンジニアの奥村です。

JS（JavaScript・jQuery）を使わないで、スクロールの途中で要素を固定できる便利なCSSプロパティ、position: stickyを使用する際の注意点をまとめたいと思います。

親・祖先要素にoverflow: hiddenを指定している

親要素だけでなく、祖先要素にoverflow: hiddenを指定している場合は固定化できません。
overflow: hiddenは、はみ出した要素を表示上カットする際に使用されることがあります。祖先要素を辿ってチェックしてみましょう。

高さの差がない

display: flexで横並びにした場合、初期値のままではフレックスアイテム同士の高さが揃ったままになりがちです。高さが揃ったままだと固定化できません。
align-items: flex-start や height指定などでフレックスアイテム毎の高さを出すようにしましょう。

ポジション指定がない

「top、botom、right、left」のポジション指定がないと固定化できません。
top: 0など、ブラウザのどこに固定化したいか指定しましよう。

まとめ

IE11のサポート終了によって、便利なCSSプロパティが使用しやすくなりました。
簡単指定でも他プロパティとの組み合わせが悪いと、「あれっ？」となってしまいます。見落とさないように注意しましょう（自戒）。