FROM CACHE - jp_header
解決済

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

Theterrusse
訪問者
2 0 0

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

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

  • CSS
1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1476 522 652

成功

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

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

 

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

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ボタンを押して頂ければ嬉しいです。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1476 522 652

成功

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

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

 

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

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ボタンを押して頂ければ嬉しいです。

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

Theterrusse
訪問者
2 0 0

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

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