position: fixed;は、スクロールしてもその部分を固定して動かさないことができます。
しかし、他のセクションと幅がずれます。
それが下の動画のように、ぴったりと合って可変するコードを紹介します。
しょーご中級の課題は、スクロールしてもヘッダーを動かさないようにすること。
最初に作り始めた時は、画面幅が1366pxで作ります。
その時は下のように合うのですが・・・。

いざレスポンシブに対応しようとすると、
ヘッダーが、下にある全てのセクションとずれることに気づきます。
↓画面幅を小さくした時
(ヘッダーが右にずれています。)

↓大きくした時(ヘッダーが左にずれています。)

コードは下記。

ググりまくって、どうやらwidthは100%ではなく、
100vwにするといいらしいことにたどりつきます。

すると・・・
↓画面を小さくした時(ぴったり合っています。)

ヘッダーと下のセクションがぴったり合って縮小されるようになりました!!
しかし、、、
画面幅を大きくすると、、、

また、ずれてしまいます。(ヘッダーが左にずれています。)
また、ググります。。。
すると、
お待たせしました。
下記のコードで、
最初にあった動画のように、画面を小さくしても大きくしても合うようになります。

まとめ
width: 100vw;
left: 50vw;
transform: translateX(-50%);
にすると、ずれることなく、中央に表示されます。
(備忘録的に書いていますので、説明不足はご了承ください。)
コメント