Houn

記事内に広告を含む場合があります

詳しく見る
Web制作

公開日:2019.10.18

更新日:2022.11.17

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

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

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

この記事の目次

HTML

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

scroll-headernav-sample

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

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

CSS

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


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

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

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

広告

jQuery

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

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