【position: stickyが効かない?!】対処法
stickyが効かない?!
ある日CSSをこねくり回しているときに先ほどまで追従してきたヘッダーが何故か動かなくなってしまった😵
なんでやろうな~とググってみると解決策が3つほどありましたので、ご紹介させていただきます
対処法3選
topやleftなどの追従ポイントを指定していない
これは初歩的な問題ですが、sticky
は追従ポイントを指定していないと固定されません
というよりポイント指定が必須条件になっているからです
他のposition
プロパティである、absolute
やfixed
は固定位置を指定せずとも機能しますが、sticky
は指定する必要がある!ということを覚えておきましょう😉
先祖要素にoverflow: hidden
、scroll
を指定している
私はこれが原因でした😅
ハンバーガーメニューのナビゲーションを横からスライドさせるようにしていたので、横にスワイプするとナビゲーションが見えてしまうようになっていました
パソコンでは横にスクロールなんて滅多にしないので、比較的問題ないですが、スマホだとスワイプするときに横にあるナビゲーションが見えてしまうのです
まあ、要するに背景を横にスクロールできないようにしていたのですが、これをヘッダーを作成した後に追加したため、「ヘッダーが付いてこないんですけど😨」ということになってしまいました
ヘッダーを実装する際にoverflow:hidden
をよく使うので、sticky
が効かなくならないように注意したいですね😳
stickyアイテムが含まれるコンテナの高さが足りない
これは私が陥ったことはないのですが、これから実装する際に気をつけたいところですね
理論上、stickyアイテムを固定位置までスクロールできなければそもそも追従してくることはありません
以下の動画が分かりやすいかと思います
【おまけ】そもそもブラウザが対応していない🤯
皆さんの中でもしかしたら凄くマイナーなブラウザを使われていることもあるかと思います
そのブラウザを使用していてposition: sticky
が効かないのであれば、対応していないと考えられます
まあ、デベロッパーのほとんどの方はマイナーなブラウザを使っているとは思いませんし、主要ブラウザの中で未対応だったIEもサポートが終了したので、そこまで心配しなくてもいいかなとは思います
まとめ
もともとあまり使われていなかったCSSプロパティもIE廃止によりどんどん使えるようになりました
今回はposition: sticky
について少し調べてみましたが、今後も新しいCSSをどんどん使っていきたいところです
最後まで閲覧いただきありがとうございました
最後まで閲覧頂きありがとうございました😂😂
参考になったら読者登録よろしくお願いいたします!!
読者登録返しします!!