JavaScriptでヘッダーに影をつける実装

本日は「JavaScriptでヘッダーに影をつける実装」に挑戦しました✨

スクロールするとヘッダーにふわっと影がつく、よく見るあの動きです😌

最初は「CSSだけでいけるのかな？」と思っていたのですが、

実際はJavaScriptでスクロール量を取得して、クラスを付け外しすることで実現できると知りました！

▼今回やったこと

・スクロール位置を取得（scrollY）

・一定以上スクロールしたらクラスを追加

・CSSでbox-shadowを適用

・transitionでふんわりした動きに

最初はエラーも出て苦戦しましたが、

「DOMが読み込まれる前にJSが動いていた」という原因に気づけたのは大きな収穫でした✨

少しずつですが、

「見た目（CSS）」と「動き（JavaScript）」の役割の違いが理解できてきた気がします😊

今後はスクロールでふわっと表示されるアニメーションにも挑戦したいです！

引き続きコツコツ頑張ります🌿

少し影が濃い気もするのでまた調整してみようと思います！