[Shopify] ヘッダーのグローバルナビをスクロール時に固定する方法（Debutテーマ）

・スクロールしたらヘッダーを固定して表示したい
・ヘッダーを固定表示にしたいが、告知バーは固定したくない

そんな場合の対応方法についてまとめました。

Debutテーマの場合で記載しますが、コードをカスタマイズすれば他のテーマでも使えるかと思います。

以下あたりも参考にどうぞ。

Sticky/Fixed Header and Navigation for Debut Theme – Shopify Community

[HELP] Debut Theme Sticky Header without Announcement Bar – Shopify Community

途中からヘッダー固定にする方法！画面上部までスクロールされたら固定する – HPcode（えいちぴーこーど）

Shopifyの無料体験をはじめる

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クラスがなくなると効かなくなるようになっています。