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

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

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

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

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

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

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

ではまた〜👋