Simplicityのメニューをスクロール追従(固定)する方法

WordPressテーマ「Simplicity」のメニュー(モバイル版も含む)をスクロールしてもついてくるようにスクロールに追従(固定)する方法を紹介します。

広告 (下に続く)

概要

このサイトでも使用しているWordPressテーマ「Simplicity」でメニューを追従させる方法を紹介します。追従することでメニューリンクがクリックされやすくなり、直帰率の減少が期待できます

広告 (下に続く)

設定の確認

WordPress管理画面のテーマ→カスタマイズより、次の設定にしてください。

  • 「レイアウト(全体・リスト)」の「グローバルナビを表示」をONにする。
  • 「レイアウト(全体・リスト)」の「モバイルメニュータイプ」を「アコーディオンツリー」にする。
  • 「色」の「グローバルナビを横幅いっぱいにする」をONにする。必須ではありませんがデザインが向上します。
グローバルナビを表示モバイルメニュータイプグローバルナビを横幅いっぱいにする

CSSの設定

style.cssに次の記述をします。小テーマの使用をおすすめします。
モバイル版メニューの「アコーディオンツリー」の配色はデフォルトテーマのグローバルナビゲーションに似たデザインにしています。4つ目の「.fixed」はJavaScriptによる固定用に使用されます。
cssは「!important」を付けないと有効になりません(後にデフォルトのモバイル版メニューのcssが読み込まれてしまいキャンセルされるため)。

.slicknav_menu{
  background:transparent !important;
 }
.slicknav_nav{
  background-color: #f7f7f7 !important;
  border: 1px solid #ddd !important;
 }
.slicknav_nav a{
  color:#000000 !important;
 }
.fixed {
  position: fixed !important;
  top: 0 !important;
  width: 100% !important;
  z-index: 10000 !important;
 }

JavaScriptの設定

footer-insert.phpに次の記述をします。小テーマの使用をおすすめします。jQueryの読み込みが必須です(デフォルトでは読み込まれます)。

<script>
  jQuery(function($) {
  var nav=$('.slicknav_menu'),offset=nav.offset(),nav1=$('#navi'),offset1=nav1.offset();
  $(window).scroll(function(){
   if($(window).scrollTop()>offset.top)nav.addClass('fixed');
   else nav.removeClass('fixed');
   if($(window).scrollTop()>offset1.top)nav1.addClass('fixed');
   else nav1.removeClass('fixed');
  });
 });
 </script>

動作

PC版

PC

スマホ版

閉じた状態開いた状態
閉じた状態開いた状態

広告 (下に続く)

謝辞

JavaScriptとスタイルはこちらのサイトのものをほぼコピペしています。ありがとうございます。

ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery – WPC

シェアする