【JavaScript】下にスクロールしたらヘッダーの色を変える

2024年5月13日

追従ヘッダーで、下にスクロールしたら背景色が変わるようにしたいなぁ

というわけで今回は下にスクロールしたらヘッダーの色が変わる実装をJavaScriptで
やっていきたいと思います。

下にスクロールしたらヘッダーの色を変える

実案件ではよくあるパターンかと思います。
メインビジュアルの上にヘッダーがあって背景が透明、下にスクロールすると
背景が白くなる･･･、みたいな感じです。

ではさっそくコードをみてみましょう！！

See the Pen 【ブログ用】ヘッダーの色を変える by そす (@Sosgoyo) on CodePen.

ヘッダーの背景はオレンジ。メインビジュアルの下のセクションの背景が同色なので
そのままスライドすると同化してしまいます。
そこでメインビジュアルを過ぎるとヘッダーの背景を白にするようにしています。

JavaScriptのコードを抜粋しておきます↓

【JS】

document.addEventListener('DOMContentLoaded',function(){
  const imgHeight = document.querySelector('.mv').offsetHeight;
  const header = document.querySelector('.header');
  const nav = document.querySelector('.lists');

  window.addEventListener('scroll',function(){
    if(window.scrollY < imgHeight){
      header.classList.remove('change-color');
      nav.classList.remove('change-color');
    }else{
      header.classList.add('change-color');
      nav.classList.add('change-color');
   }
  })
});

では、コードを詳細にみていきましょう！！

offsetHeight

まずコードの前半は変数の設定ですね！ここでポイントがあります。

 const imgHeight = document.querySelector('.mv').offsetHeight;

「offsetHeight」は要素の高さ（縦のpadding・borderを含む）を整数として返してくれます。
ここでは、「.mv」のクラスが当たっている要素の高さを取得して「imgHeight」の変数として代入しております。

「.mv」にはheight:500px;を当ててますので、imgHeightには「500」という整数が代入されます。

window.scrollY

続いて説明するのが「window.scrollY」です。
ウィンドウの現在のスクロール位置を取得するには、横軸はwindow.scrollX、縦軸はwindow.scrollYプロパティを使用します。

 if(window.scrollY < imgHeight)

これは、現在の縦軸の位置が「imgHeight」未満の場合の条件分岐になります。
先程「imgHeight」に「.mv」の高さ500pxを代入したので、現在の縦軸の位置が500px未満の場合、
という条件分岐になります。

window.addEventListener(‘scroll’,function()

最後に全体をみてみましょう。

 window.addEventListener('scroll',function(){
    if(window.scrollY < imgHeight){
      header.classList.remove('change-color');
      nav.classList.remove('change-color');
    }else{
      header.classList.add('change-color');
      nav.classList.add('change-color');
   }
  })

「window.addEventListener(‘scroll’,function()」でスクロールした時のイベントを設定していきます。

if else 文を使って、上記で説明した「window.scrollY < imgHeight」を満たすときとそれ以外のときで
コードを書き分けます。

　header.classList.remove('change-color');
  nav.classList.remove('change-color');

現在の縦軸の位置が500px未満のときは、「header」と「nav」から「change-color」という
クラスを取り除きます。

　header.classList.add('change-color');
  nav.classList.add('change-color');

現在の縦軸の位置が500pxを超える場合は、「header」と「nav」に「change-color」というクラスを
付与します。

CSSはこんな感じです↓

【CSS】

.header {
  max-width: 500px;
  width: 100%;
  height:80px;
  background-color: orange;
  position: fixed;
  top: 0;
  left: 8px;
  transition: .3s;
}

.header.change-color {
  background-color: white;
}

.lists{
  display: flex;
  max-width: 500px;
  width: 100%;
  height: inherit;
  align-items: center;
  color: white;
  transition: .3s;
}

.lists.change-color {
  color: black;
}

.list {
 list-style: none;
  padding-left:20px;
  font-weight: 700;
 
}

.mv {
max-width: 500px;
width: 100%;
height: 500px;
background-color: blue;
}

.section1 {
  max-width: 500px;
width: 100%;
height: 500px;
background-color: orange;
}

.section2 {
  max-width: 500px;
  width: 100%;
  height: 2000px;
  background-color: green;
}

「change-color」のクラスあるなしで「background-color」「color」の色をしております。