はてなブックマーク

スクロールするとデザインが変わるヘッダーってよく見かけますよね。 背景の色が変わったり、ヘッダーの高さがせまくなったり。。 ヘッダーナビゲーションは上部で固定されていることが多いので、 スクロールした後のデザインを変えないと、 文字と背景のコントラストが不十分で読みづらくなってしまったりします。 今回はスクロールでデザインが変化する ヘッダーナビゲーションを作る手順を説明してみようと思います。 このようなスクロールでデザインが変わるサンプルデモを作ってみました。 See the Pen by notebook (@orange-notebook) on CodePen. 100px以上スクロールすると下記デザインが変化するようになっています。