スティッキーヘッダにz-indexを書き足したら動きが変になるのを直してみた
スティッキーヘッダーは、二つのやり方があるよね。
一つ目は、最初から固定しておくやり方。そして、二つ目は画面高さを取得して、スクロールに合わせて「sticky」（とかの）クラスを追加してやる方法。
僕は後者を使うことが多い。
でね、ポジション固定してz-index追加したら、なんか、下の画面が上にシュッと動く訳ですよ。
最初、これは「ヘッダが吸い付く時の動作ってこんなもんだろう」って思ってたんだけど違った。
当たり前だけど、z-indexで重ね順を作りだしているので、下の階層のは上に上がろうとする。
なので、スムーズに動かしてやろうと思うなら、クラスを付与したと同時に（z-indexを作動させたと同時に）、下の要素にパディングトプでヘッダの高さ分の余白を入れてやればいいんですわ。
そうなったら、どこに「sticky」ってクラスを付与するかも問題になりますよね。僕はヘッダのすぐ下にある要素に直接付け足す、つまり２箇所に付け足すというやり方でやりました。あんまりスマートとは言えないけどね～。ま、いいやん、別に間違いでもない訳だし。
CSSメモっときます。
|
1 2 3 |
body.home.site-content.sticky { padding-top:136px; } |
動いてるヨーダ。