Liquid、JavaScriptなどに関する質問
担当者さま
下記のURLのように
ヘッダーをスクロールで色を変更したいのですが
どのようにすればよろしいのでしょうか?
ご指導、ご鞭撻何卒よろしくお願い致します。 m(_ _)m
参考URL ↓
https://kinfolk-csr.com/ja?fbclid=PAAabVorqnMKJ2tO_48koILrvuR5rv_gcHQhyu64GQgs3VEfJN9oQGZQ-9tEY
PS. ロゴは黒から白の画像変更もします。
解決済! ベストソリューションを見る。
成功
お世話になっております。
スクロール位置によって、ヘッダーカラーを変えたいとお見受けしました。
コード編集する前提になりますが、
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ボタンを押して頂ければ嬉しいです。
成功
お世話になっております。
スクロール位置によって、ヘッダーカラーを変えたいとお見受けしました。
コード編集する前提になりますが、
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 アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025サポートの選択肢が増えていく中、最適となる選択の判断が難しくなっているかと存じます。今回は問題の解決に最適となるサポートの選択方法を、紹介させて頂きます。 選択肢のご紹介...
By Mirai Oct 6, 2024