ヘッダーをスクロールで色を変更したいです

[Theterrusse]

担当者さま
下記のURLのように
ヘッダーをスクロールで色を変更したいのですが
どのようにすればよろしいのでしょうか？
ご指導、ご鞭撻何卒よろしくお願い致します。　m(_ _)m
参考URL ↓
https://kinfolk-csr.com/ja?fbclid=PAAabVorqnMKJ2tO_48koILrvuR5rv_gcHQhyu64GQgs3VEfJN9oQGZQ-9tEY

PS. 　ロゴは黒から白の画像変更もします。

[株式会社フルバランス · Accepted solution]

お世話になっております。

スクロール位置によって、ヘッダーカラーを変えたいとお見受けしました。

コード編集する前提になりますが、

1. cssに変えたい色を設定

.header-color {
  background-color: 任意の色;
  color: 任意の色;
}

2. スクロールに応じて、headerにクラスを付与するJSを作成

$(function() {
  $(window).scroll(function() {
    const scroll = $(window).scrollTop();
    if (scroll >= 100) { // 100は任意の値に変えてください
      $("header").addClass("header-color");
    } else {
      $("header").removeClass("header-color");
    }
  });
});

また、こちらのサイトも参考になるのではと思いました。

https://gorigoricode.com/change-scroll-color/

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

[Theterrusse]

株式会社フルバランス 担当者さま

ご丁寧なご返信誠に感謝致します。
一度そちらの方法で実装してみます。
また、何かありましたらご連絡さしあげます。
よろしくお願い致します。