CSSで position: sticky が効かない場合は

position: stickyの活用

スクロールと連動して特定の要素を画面に張り付ける、とても便利な position: sticky。

以前はposition: fixedとjavascriptを併用して表現するしかなかったのですが、sticky属性が追加されてとても便利になりましたね！！

こいつを活用すればスクロールしても付いてくるヘッダーやサイドメニューのバナーなど、様々なところで応用できます。

ピンと来ない方は下のサンプルをスクロールしてみれば、動きが分かると思います。
(この記事を見ているというのは、分からないはずないと思いますけどね。(笑))

See the Pen
sticky01 by Bong yiroon (@boltmanber)
on CodePen.

上記のサンプルで一つ気にしていただきたいところは、sticky属性を持つ要素は、自分の親要素内でしか適用されないことです。
ページ全体を通して適用させたい場合はbodyタグみたいに、ページ全体を包むタグの直下の子要素として配置させる必要がありますね。

See the Pen
sticky02 by Bong yiroon (@boltmanber)
on CodePen.

ネット上で「stickyを適用させた要素が唯一の子要素の場合はうまく動作しない」というブログをよく見かけますが、それは間違いです。唯一の子要素であっても、親要素に十分なheightがあれば、その範囲内で動作します。

See the Pen
sticky03 by Bong yiroon (@boltmanber)
on CodePen.

使用時の注意点

sticky要素の親要素のいずれか(直の親以外でも)にoverflow: auto、overflow: hidden、overflow: scroll が適用されている場合はstickyは効きません。

See the Pen
sticky04 by Bong yiroon (@boltmanber)
on CodePen.

どうでしたか？
stickyを活用して素敵なホームページを作ってください！

stickyのサポートブラウザーはこちら。
https://caniuse.com/#feat=css-sticky

ie11。。。早く全滅してくれないかな。。。

Buy me a coffee