これ、CSSだけでできますか?② スクロールすると低くなる固定ヘッダー(結論: 利用シーンは限定的)

1 min read読了の目安(約700字 1

jsでやるのが当たり前と思われているものをCSSで作っちゃお企画、第2弾です!

ポイントは sticky と 2つのレイヤー

以下の図をみてもらえると仕組みが分かる…かもしれないです。
高さのあるレイヤーの上に、ロゴ付きの低いレイヤーを乗せています。
そして高いレイヤーはposition:absolute; top:0。低いレイヤーはposition:sticky;でスクロールすると上に固定されるようにします。
2つのレイヤーを同じ色、または低いレイヤーを透明にすることで、伸縮しているように見えます。
スクロールすると低くなる固定ヘッダーの仕組み

……説明がヘタなので実際の動きをみてください。

欠点はロゴのサイズが変わらないこと

この方法の最大の欠点は、低くなった時に同時にロゴのサイズを小さくする、ができないことですね…
何せトリガーがないので…(スクロールしたかどうかを判断できない)
でも、中にはこれでOKな案件もある…と思います! あと低い方(stickyの方)の背景を透明にするとイケてる感じになります。
……私ではこれ以上思いつきませんでした🙈
良いアイデアあったら教えてくださいネ😇

ではまた〜👋