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

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

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

HTML

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

scroll-headernav-sample

色を変えたいヘッダー部分に.js-header、メインビジュアルに.js-mainVisualですね。この要素をjQueryでいじっていくわけです。（もちろん命名規則との兼ね合いで適宜変えてもらって大丈夫ですし、idで降るでも。その場合は後述のjsも書き替えですね）

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


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

「メインビジュアル画像を超えて下スクロールしたら、この.headerColor-defaultクラスを付けて文字色を変化させる」ってしたいわけです。こちらも、クラス名はお好みでオッケーです。

下ごしらえが終わりましたので、jQueryで実際に要素をいじる処理を書いていきましょう。

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