【EC-CUBE 4】ヘッダーを上部に固定し、スクロールで追従させるカスタマイズ

EC-CUBE 4のヘッダー（商品検索・ログインナビ・カート）を画面上部に固定し、スクロールしても付いてくるようにするカスタマイズです。すべて管理画面だけで完結し、ファイルサーバーやコマンド操作は必要ありません。

.header_customize {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: #fff;
  opacity: 0.95;
  padding-bottom: 15px;
}

ページを下までスクロールしても、商品検索・ログインナビ・カートが上部に残る

固定・追従ヘッダーのしくみ

スクロールしても表示位置が変わらないようにするには、CSSの position: fixed を使うのが一般的です。ただし、これを当てるだけでは表示が崩れます。理由は次の2つです。

• position: fixed を指定した要素は、通常の配置の流れから外れる（＝そこに存在しない扱いになる）
• そのため後続のコンテンツが上へ詰め、固定したヘッダーの下に潜り込んでしまう

これを防ぐために、ヘッダーと同じ高さの空要素を置いてスペースを確保します。本記事ではこの空要素に header-customize-space というクラスを付け、その高さをJavaScriptで合わせます。

実装の手順

作業はすべてEC-CUBEの管理画面で行います。全体の流れは次のとおりです。

1. 1ブロック管理より、追従ヘッダー用のブロックを新しく用意する
2. 2CSS管理より、追従ヘッダー用のCSSを追記する
3. 3JavaScript管理より、スペーサーの高さをヘッダーに合わせるスクリプトを追記する
4. 4レイアウト管理より、用意したブロックとデフォルトのブロックを差し替える

CSSとJavaScriptを管理画面から反映させる手順そのものは、以下の記事にまとめています。

1. STEP1

   ブロック管理より「追従ヘッダー用ブロック」を用意する

   ブロック管理から新しいブロックを作り、以下のコードを貼り付けます。

   

   ブロック管理画面。ブロック名とファイル名を決めてコードを貼る

   <div class="header-customize-space"></div>
   <div class="ec-headerNaviRole header_customize">
       <div class="ec-headerNaviRole__left">
           <div class="ec-headerNaviRole__search">
               {{ render(path('block_search_product')) }}
           </div>
           <div class="ec-headerRole__navSP">
               {{ include('Block/nav_sp.twig') }}
           </div>
       </div>
       <div class="ec-headerNaviRole__right">
           <div class="ec-headerNaviRole__nav">
               {{ include('Block/login.twig') }}
           </div>
           <div class="ec-headerRole__cart">
               {{ include('Block/cart.twig') }}
           </div>
       </div>
   </div>

   中身はデフォルトの「ヘッダー(商品検索・ログインナビ・カート)」ブロックのコピーで、元のコードに加えているのは次の2点だけです。

   加えたもの	何のため
   header_customize クラスを追記	次の手順でCSSを当てるための目印。ここに position: fixed を指定する
   先頭に空の div を追加	固定したヘッダーの分の高さを確保するスペーサー。中身は空でよい

   デフォルトの「ヘッダー(商品検索・ログインナビ・カート)」を直接書き換えても実装はできます。ただし後で不具合が出たときに元へ戻しにくいため、新しくブロックを用意するほうが安全です。

2. STEP2

   CSS管理より、追従ヘッダー用のCSSを追記する

   .header_customize {
     position: fixed;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     z-index: 100;
     background: #fff;
     opacity: 0.95;
     padding-bottom: 15px;
   }

   

   CSS管理画面。背景色や透過度は好みに合わせて調整する

   幅の指定が要らない理由

   EC-CUBEのデフォルトCSSでは .ec-headerNaviRole に width: 100% と max-width: 1130px が指定されています。position: fixed を当てると width: 100% の基準が親要素ではなく画面全体に変わるため、画面幅いっぱい（ただし最大1130px）に広がります。だから幅を書き足す必要がありません。

   左右を画面いっぱいに伸ばしたい場合は max-width: none を、逆に狭めたい場合は max-width の値を書き換えてください。

3. STEP3

   JavaScript管理より、スペーサーの高さを合わせる

   STEP1で置いた空要素に、ヘッダーと同じ高さを与えます。デフォルトのヘッダーは高さが固定されておらず、中の要素のサイズによって変わります。そのためページの読み込み時とウィンドウのリサイズ時に、そのときの高さを測って反映させます。

   document.addEventListener("DOMContentLoaded", function() {
     function adjustHeaderSpaceHeight() {
       var headerCustomizeSpace = document.querySelector(".header-customize-space");
       var headerCustomize = document.querySelector(".header_customize");
   
       if (headerCustomizeSpace && headerCustomize) {
         headerCustomizeSpace.style.height = headerCustomize.offsetHeight + "px";
       }
     }
   
     adjustHeaderSpaceHeight();
   
     window.addEventListener("resize", adjustHeaderSpaceHeight);
   });

   

   JavaScript管理画面。ここに貼るだけで全ページに反映される

   ヘッダーの高さを固定値で決められるなら、このJavaScriptは不要です。ただし高さを固定するとウィンドウ幅によっては見づらくなったりレイアウトが崩れたりします。その場合は メディアクエリ で幅ごとに高さを変えることになり、結局は手間が増えることもあります。

4. STEP4

   レイアウト管理より、ブロックを差し替える

   最後に、用意したヘッダーブロックとデフォルトの「ヘッダー(商品検索・ログインナビ・カート)」ブロックを入れ替えます。

   

   レイアウト管理画面。ドラッグでブロックを差し替える

   レイアウトにはトップページ用と下層ページ用の2つがあります。全ページで固定・追従させたい場合は、両方とも差し替えるのを忘れないでください。

思ったとおりに動かないときは

まとめ

EC-CUBE 4のヘッダーを固定・追従させる方法を紹介しました。管理画面のブロック・CSS・JavaScript・レイアウトの4か所だけで完結するため、ファイルサーバーを触らずに試せます。

• ヘッダーブロックを複製し、header_customize クラスとスペーサー用の空要素を足す
• CSSで position: fixed を当てる。幅は指定しなくてよい
• スペーサーの高さはJavaScriptでヘッダーに合わせる（固定値で足りるなら不要）
• レイアウト管理でトップページ用と下層ページ用の両方を差し替える

EC-CUBEのカスタマイズに関する記事

• カスタマイズのまとめ
• CSSの簡単設定と反映方法
• JavaScriptの簡単設定と反映方法
• 固定配置ヘッダー（CSSのみ）実装解説
• デモで学ぶ メディアクエリ実践ガイド

この記事に出てきた用語

• EC-CUBEとは？
• CSSとは？
• JavaScriptとは？
• キャッシュとは？
• メディアクエリとは？
• DOMとは？