【jQuery】特定の高さまでスクロールすることでヘッダーの色を変更させる方法

2019-12-312020-12-17

Webサイトにおいて、特定の高さまでスクロールすることでヘッダーの色が変更される記述の仕方を記載していきます。

1. 使用されるケース
2. サンプル
3. 方法
- 3.1. 記述内容説明
- 3.2. 補足

使用されるケース

「ヘッダー（グローバルメニュー入り）の表示を上部に固定する」かつ「ヘッダーを透過させてメインビジュアルに被せる」ということが考慮されたサイトに主に使われる手法となります。

多くの場合は、メインビジュアルの画像や動画に「夜景」など暗めのものが使用されています。

メインビジュアルの面積を多く取るためにヘッダーの色を薄く透過して被せるのですが、スクロールによりメインビジュアル部分が画面上に消えてメインビジュアルより下のコンテンツとヘッダーが重なってしまうと、視認性が悪くなってしまいます。

これを解消するため、「スクロールしてメインビジュアル部分が画面上に消えた際はヘッダの背景色を変更する（多くの場合は透明度を下げる）」といった機能を入れることが有効です。

サンプル

リンク

※メインビジュアルを越えてスクロールすると、色（透明度）が変化します

方法

jQueryを使って実装していきます。

※jQueryを使うための準備については、下記よりご確認ください。

「jQuery」を使うための準備と使い方について

HTMLにおいて、メインビジュアルの画像には、今回「mv」というclassを設定しておきます。
※任意で命名してOKです。

<img class="mv" src="mv.jpg" alt="">

CSSにおいて、ヘッダーには、デフォルトの背景色、透明度を設定しておきます。

header {
　　background-color: rgba(0, 0, 0, 0.2);
}

そして、jQueryは下記のように記述します。

var mvh = $('.mv').height();

$(window).scroll(function() {
  var top = $(window).scrollTop();
  if (mvh < top) {
    $('header').css('background-color', 'rgba(0,0,0,0.8)');
    } else {
    $('header').css('background-color', 'rgba(0,0,0,0.2)');
  }
});

記述内容説明

まず、
「var mvh = $('.mv’).height()」
で、メインビジュアルの高さを取得して「mvh」という変数に入れています。

「$(window).scroll(function() {～})」
については、画面がスクロールしたときに、{}内の機能を発動させるという内容となります。

「var top = $(window).scrollTop();」
について、
「$(window).scrollTop()」
で表示されている画面トップの座標（＝ページの最上部から何ピクセルの位置にあるか）が取得できるので、それを「top」という変数に入れています。なお、
「 $(window).scroll(function() {～})」の{}内に記述しているので、スクロールする度に「top」の数値は更新されていきます。

そして条件分岐を行います。
if (mvh < top) {
$('header’).css('background-color’, 'rgba(0,0,0,0.8)’);
} else {
$('header’).css('background-color’, 'rgba(0,0,0,0.2)’);
}
によって、もし「mvh（メインビジュアルの高さ）」よりも「top（画面のTOP座標）」が大きい場合は、ヘッダーの背景色を「 rgba(0,0,0,0.8) 」にして、「mvh」と「top」が等しい、また小さい場合はデフォルトの背景色と同じ「 rgba(0,0,0,0.2) 」にしなさいという命令が完成します。

補足

ヘッダーに下記のようにアニメーションに要する時間を設定しておくことで、色（透明度）の変更を滑らかにすることができます。
※数値は任意で設定してください

 header {
      transition: background-color 0.2s;
    }

以上となります。

Web制作,jQuery