・スクロールしたらヘッダーを固定して表示したい
・ヘッダーを固定表示にしたいが、告知バーは固定したくない
そんな場合の対応方法についてまとめました。
Debutテーマの場合で記載しますが、コードをカスタマイズすれば他のテーマでも使えるかと思います。
以下あたりも参考にどうぞ。
Sticky/Fixed Header and Navigation for Debut Theme – Shopify Community
[HELP] Debut Theme Sticky Header without Announcement Bar – Shopify Community
途中からヘッダー固定にする方法！画面上部までスクロールされたら固定する – HPcode（えいちぴーこーど）
Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。
ShopifyのDebutテーマでスクロール時にヘッダーのナビを固定する方法
今回は、以下のような「告知バー」（一番上のバー）が表示されていなくても、表示されていたとしても、「告知バー」は固定せずにグローバルナビのみを固定する方法で実装します。
今回はJQueryを使用するため、headerにJSを読み込んでおいてください。
次に、/layout/theme.liquid の </body> 前に以下を追加します。
<script>
var navPosition = jQuery('.site-header').offset().top; // グローバルナビの位置
var navHeight = jQuery('.site-header').outerHeight(); // グローバルナビの高さ
jQuery(window).on('scroll', function() {
if (jQuery(this).scrollTop() > navPosition) {
$('body').css('padding-top', navHeight);
$('.site-header').addClass('sticky');
} else {
$('body').css( 'padding-top', 0 );
$('.site-header').removeClass('sticky');
}
});
</script>ここでは、グローバルナビの縦位置がスクロール位置よりも大きくなった時に、bodyタグにグローバルナビの高さ分のpadding-topを付与して、site-headerにstickyというクラス名をつけています。
padding-topを付与しているのは、スクロール時にガタッとずれないようにするためです。
また、グローバルナビの縦位置がスクロール位置よりも小さくなった時には、bodyタグにグローバルナビの高さ分のpadding-topを0にして、site-headerについていたstickyというクラス名を削除して元に戻しています。
次に、CSSを追加します。
/*================ common header / sticky header ================*/
.sticky {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
max-width: 100%;
background: #fff;
-webkit-box-shadow: 0px 4px 4px -8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 4px 4px -8px rgba(0,0,0,0.75);
box-shadow: 0px 4px 4px -8px rgba(0,0,0,0.75);
}こんな感じですが、影の大きさなどはbox-shadowを適当にいじってください。
stickyクラスに対して固定してますので、stickyクラスがなくなると効かなくなるようになっています。
ShopifyのDebutテーマでスクロール時にヘッダーのナビを固定する際に確認すべきこと
取り急ぎ以上で固定はされるのですが、元々のヘッダーは固定されないことを前提に作られているため、固定する際に気をつけることや、それ以上に対応しなければいけない事項がないかを確認する必要があります。例えば以下です。
PC/スマホでスクロールした際に、検索ボタンを押した時の対応
PCでもスマホでも同じですが、スクロールした後に、検索アイコンを押した時の表示は以下にようにヘッダの上に表示されるようになってしまっています。
これをヘッダの下に表示するように見た目を調整したりするにはCSSを調整する必要があります。
スマホでスクロールした際に、ハンバーガーメニューを押した時の対応
スマホでもう1点厄介なのは、スクロールした後にハンバーガーメニューを押した時の挙動です。
一度メニューボタンを押し、再度ボタンを押して閉じる際に、なぜかページの先頭へ飛んでしまいます。
また、カテゴリーなどでメニューを階層化している場合には、下の階層を選択した後に左上の戻るボタンで上の階層に戻ろうとした時に、なぜかページの先頭へ飛んでしまいます。
これを修正するには、JavaScriptをカスタマイズする必要があります。（検証していないので今回は省きますが、テーマはアップグレードされる可能性があるので、元のJS自体に手を入れるのは避けた方が良いかと思われます。）
以上です。
