スクロール時にヘッダーの背景色を変更する方法

CSSのみを使用する方法: まず、HTMLのヘッダー要素に適用するCSSクラスを作成します。例えば、"scroll-header"というクラスを使用します。

.scroll-header {
  background-color: #ffffff; /* 初期の背景色 */
  transition: background-color 0.3s; /* 背景色の変化をスムーズにするためのトランジション */
}
.scroll-header.scrolled {
  background-color: #ff0000; /* スクロール時の背景色 */
}

次に、JavaScriptを使用してスクロールイベントを監視し、ヘッダーに適切なクラスを追加または削除します。

window.addEventListener('scroll', function() {
  var header = document.querySelector('header');
  var scrollPosition = window.scrollY;
  if (scrollPosition > 0) {
    header.classList.add('scrolled');
  } else {
    header.classList.remove('scrolled');
  }
});

これで、スクロール時にヘッダーの背景色が変化するようになります。

jQueryを使用する方法: jQueryを使用すると、より簡潔なコードで同じ結果を得ることができます。

まず、jQueryをHTMLファイルに追加します。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

次に、以下のJavaScriptコードを追加します。

$(window).scroll(function() {
  var scrollPosition = $(window).scrollTop();
  var header = $('header');
  if (scrollPosition > 0) {
    header.addClass('scrolled');
  } else {
    header.removeClass('scrolled');
  }
});

CSSの部分は1.の方法と同じです。これにより、スクロール時にヘッダーの背景色が変化するようになります。

以上が、スクロール時にヘッダーの背景色を変更する方法の例です。ご参考になれば幸いです。