Webサイトにおいて、特定の高さまでスクロールすることでヘッダーの色が変更される記述の仕方を記載していきます。 「ヘッドのリボンの色を変更する女の子」 使用されるケース 「ヘッダー(グローバルメニュー入り)の表示を上部に固定する」かつ「ヘッダーを透過させてメインビジュアルに被せる」ということが考慮されたサイトに主に使われる手法となります。 多くの場合は、メインビジュアルの画像や動画に「夜景」など暗めのものが使用されています。 メインビジュアルの面積を多く取るためにヘッダーの色を薄く透過して被せるのですが、スクロールによりメインビジュアル部分が画面上に消えてメインビジュアルより下のコンテンツとヘッダーが重なってしまうと、視認性が悪くなってしまいます。 これを解消するため、「スクロールしてメインビジュアル部分が画面上に消えた際はヘッダの背景色を変更する(多くの場合は透明度を下げる)」といった機
![【jQuery】特定の高さまでスクロールすることでヘッダーの色を変更させる方法 | Webクリエイター自省録](https://cdn-ak-scissors.b.st-hatena.com/image/square/f55f91fcb7594730effee07eb18a1240bd9ae3fa/height=288;version=1;width=512/https%3A%2F%2Fwebcat.work%2Fwp%2Fwp-content%2Fuploads%2F2019%2F12%2F158A8244_TP_V4.jpg)