Stickyヘッダー、背景透過の作り方
CSSでヘッダーを上部に固定する方法に、昔からposition:fixed, top:0という手法がある（らしい）。
この問題点は、他の要素がtop:0始まりになり、headerと他要素の領域がかぶってしまうこと。
領域がかぶる問題は、各要素の開始位置を指定することで解決するが、二度手間なため「正しい方法」だという感覚がしない。
position:stickyはこれらの問題を解決する。具体的には、ページトップでは排他的に領域を占め、スクロールするとヘッダーとして重なることができる。
使用法
code:css
position:sticky;
top:0;
さて本題。
Youtubeのモックをクローンしていると、ヘッダーから背景画像がごく薄く透けて見えることがわかった。
これを実現するために試した手法のうち、以下はうまくいかなかった。
- opacity: 80;
- backdrop-filter: blur(2px);
- backdrop-filter: opacity(0.9);
https://css-tricks.com/the-backdrop-filter-css-property/
うまくいかない原因は、背景画像が設定されておらず、透明度が意味をもたないこと。rgba(255,255,255,0.98)のように設定してあげれば問題なく解決できる。
だいたいこんなコードを書いた。
code:js
zIndex={1}
opacity={0.98}
backgroundColor="rgba(255, 255, 255, 0.98)"