【コピペOK】スクロールしても固定されるグローバルメニューの作り方｜CSS＋JavaScript

今回は、WordPressサイトでスクロールしてもグローバルメニュー（ナビゲーションメニュー）を固定表示する方法を紹介します。

1 実装のポイント

グローバルメニューを固定表示（Sticky）にすることで、訪問者はページをスクロールしてもメニューにアクセス可能になります。CSSだけで実装可能な場合もありますが、テーマによってはJavaScriptで調整する必要があります。

2 汎用CSS

/* -------------------------
 * Sticky（スクロール追従）用スタイル
 * ------------------------- */

#nav.fixed {
    position: fixed;                  /* スクロールしても画面上部に固定 */
    top: 0;                           /* 画面上端に配置 */
    width: 100%;                      /* 横幅いっぱいに広げる */
    z-index: 999;                     /* 他要素より前面に表示 */
    background: #fff !important;      /* 背景色（テーマに合わせて調整可能） */
    opacity: 1 !important;            /* 完全に不透明（透けない） */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 少し影をつけて浮いて見える */
}
  

3 テーマ別サンプルCSS

3.1 Lightning用

/* -------------------------
 * Lightningテーマのヘッダーメニュー用固定スタイル
 * ------------------------- */

.global-nav {
    position: fixed;      /* 画面上部に固定 */
    top: 0;               /* 画面上端に配置 */
    width: 100%;          /* 横幅いっぱいに広げる */
    z-index: 9999;        /* 他要素より最前面に表示 */
    background-color: #fff; /* 背景色を白にして下のコンテンツが透けないように */
}
  

3.2 Cocoon用

/* -------------------------
 * Cocoonテーマのヘッダーメニュー用固定スタイル
 * ------------------------- */

.navi-in {
    position: fixed;       /* 画面上部に固定 */
    top: 0;                /* 画面上端に配置 */
    width: 100%;           /* 横幅いっぱいに広げる */
    z-index: 9999;         /* 他要素より最前面に表示 */
    background-color: #fff; /* 背景色を白にして下のコンテンツが透けないように */
}
  

4 Javascriptにコードを追加

「スクロール時の固定を示す」ための簡単なJSコード

ファイル名：fixed-menu.js
保存先：wp-content/themes/child-theme/js/fixed-menu.js

jQuery(function($){
  var menu = $('.global-nav'); // Lightning
  var offset = menu.offset().top;
  $(window).scroll(function(){
    if ($(window).scrollTop() > offset) {
      menu.addClass('fixed');
    } else {
      menu.removeClass('fixed');
    }
  });
});
  

4.1 ディレクトリ構造

5 代用プラグイン

プラグインを利用する場合は「Sticky Menu (or Anything!) on Scroll」などのプラグインで、メニューや任意の要素を固定できます。

6 まとめ

スクロールしてもグローバルメニューを固定表示することで、サイトの操作性を向上できます。テーマによってIDやクラスが異なるため、対象要素を正しく指定するのがポイントです。