ハンバーガーボタンをスクロールに追随するように配置するために position:fixed
を指定しました。
position:fixed
を指定すると、配置する位置は top
や left
、 right
などで表示領域全体に対しての位置指定しかできません。
デザインの関係で、1920px
で以上で表示したときは、1920px
の右上にハンバーガーボタンを設置したかったのですが、単純に px
だけでは指定ができませんでした。
単純に px
指定だけでは任意の位置に指定することはできませんが、calc
を使えば、任意の位置(1920px
の右上)に配置することができます。
.btn {
right: calc((100% - 1920px) / 2);
}
100%
は表示領域の最大サイズです。そこから 1920px
を減算することで、1920px
以上の余白を計算できます。
最初は、right: calc((100vw - 1920px) / 2);
として 100%
ではなく、 100vw
と指定していました。
この指定だとブラウザのズーム機能で縮小すると左側に少しズレが生じました。
vw
はスクロールバーを含まないサイズです。スクロールバーがあると、その分ズレが生じたのかと思います。
100%
だと問題なく表示されます。
求められる値は、左右をあわせた余白のサイズなので、2
で除算すると片方の余白を計算できます。
1921px
以上で表示したときだけにスタイルを適用したいときは、メディアクエリで @media screen and (min-width: 1921px)
内で指定すれば 1921px
以上で表示したときだけにスタイルを適用できます。
.btn {
right: 0;
}
@media screen and (min-width: 1921px) {
.btn {
right: calc((100% - 1920px) / 2);
}
}
必要最低限の記述しかしていませんが、 1920px
までは right:0
で、 1921px
以上になったら right: calc((100% - 1920px) / 2);
を適用するのがいいです。
calc
を使うことで、fixed
で指定しても任意の位置にナビボタンを配置することができます。
※そもそも、ハンバーガーメニューのUIに賛否あると思いますが、是非は問いません。