スクロールで色が変わるヘッダーナビのjQueryサンプル

スクロールするとヘッダーナビのスタイルが変わるサンプルコードです。

よくあるケースが、メインビジュアル画像を敷いた上にナビを白文字で乗せて、コンテンツエリアまでスクロールするとサイトのデフォルトの文字色、黒に変わるような実装です。

HTML

最初に前提として、適用させたいHTMLファイルに下記の通りクラス名を付けておきます。

色を変えたいヘッダー部分に.js-header、メインビジュアルに.js-mainVisualですね。

この要素をjQueryでいじっていきます。（もちろん命名規則との兼ね合いで適宜変えてもらって大丈夫ですし、idで降るでも。その場合は後述のjsも書き替えになります）

CSS

あとはCSSにもこう書いておきます。

.headerColor-default {
  color: #333;
  /* （画像よりも下までスクロールした時に変えたい文字色） */
}

「メインビジュアル画像を超えて下スクロールしたら、この.headerColor-defaultクラスを付けて文字色を変化させる」とします。

こちらも、クラス名はお好みでオッケーです。

広告

jQuery

次に、jQueryで実際に要素をいじる処理を書いていきましょう。

メインビジュアルの高さを基準に、スクロール量によって.headerColor-defaultを付け外しして、色を変える。という内容になります。