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

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

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

この記事の目次

HTML

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

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

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

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


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

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

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

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

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

この記事を読んでくださったWeb制作会社・フリーランスのあなたへ。

サイト保守契約は月払いが多いと思いますが、決済方法はどうされていますか？

便利なのがクレジットカード定期引き落とし。一度お客様に簡単な手続きをいただければ毎月自動で決済してくれるので、制作会社・お客様とも手間が大きく軽減されます。

当事務所ではSquare（スクエア）というサービスを3年以上利用中です。

導入は無料で、コストはクレジット決済手数料の3.75%のみ。毎月請求書を送る、未払いがないかチェックする‥などの手間が省けるなら安いのではないでしょうか。

手続き操作もカンタンで、「サブスク販売で定期的なクレジットカード決済を導入する（Squareを利用）」という記事で解説もしていますので、ご参考ください。

保守費決済のほか、ちょっとした小額決済も請求リンクを送ってすぐ完了。非常にラクでオススメです。まずはアカウント登録して、一度使い心地を試してみてください。