【position: stickyが効かない？！】対処法

ある日CSSをこねくり回しているときに先ほどまで追従してきたヘッダーが何故か動かなくなってしまった😵

なんでやろうな～とググってみると解決策が3つほどありましたので、ご紹介させていただきます

これは初歩的な問題ですが、stickyは追従ポイントを指定していないと固定されません

というよりポイント指定が必須条件になっているからです

他のpositionプロパティである、absoluteやfixedは固定位置を指定せずとも機能しますが、stickyは指定する必要がある！ということを覚えておきましょう😉

私はこれが原因でした😅

ハンバーガーメニューのナビゲーションを横からスライドさせるようにしていたので、横にスワイプするとナビゲーションが見えてしまうようになっていました

パソコンでは横にスクロールなんて滅多にしないので、比較的問題ないですが、スマホだとスワイプするときに横にあるナビゲーションが見えてしまうのです

まあ、要するに背景を横にスクロールできないようにしていたのですが、これをヘッダーを作成した後に追加したため、「ヘッダーが付いてこないんですけど😨」ということになってしまいました

ヘッダーを実装する際にoverflow:hiddenをよく使うので、stickyが効かなくならないように注意したいですね😳

これは私が陥ったことはないのですが、これから実装する際に気をつけたいところですね

理論上、stickyアイテムを固定位置までスクロールできなければそもそも追従してくることはありません

以下の動画が分かりやすいかと思います

皆さんの中でもしかしたら凄くマイナーなブラウザを使われていることもあるかと思います

そのブラウザを使用していてposition: stickyが効かないのであれば、対応していないと考えられます

まあ、デベロッパーのほとんどの方はマイナーなブラウザを使っているとは思いませんし、主要ブラウザの中で未対応だったIEもサポートが終了したので、そこまで心配しなくてもいいかなとは思います

もともとあまり使われていなかったCSSプロパティもIE廃止によりどんどん使えるようになりました

今回はposition: stickyについて少し調べてみましたが、今後も新しいCSSをどんどん使っていきたいところです

最後まで閲覧いただきありがとうございました

最後まで閲覧頂きありがとうございました😂😂
参考になったら読者登録よろしくお願いいたします！！
読者登録返しします！！

読者になる

Timemo