LION MEDIAのヘッダーメニューを上部固定する処理をjQueryとVueで実装

LION MEDIA(ライオンメディア)のヘッダーメニューをスクロール途中で上部固定する処理をjQueryとVue.jsの両方でサンプルを作りましたのでメモします。

 

テーマ側の設定

デフォルトでヘッダーメニューが表示されるように管理画面側で設定していきます。

  1. 【外観】→【カスタマイズ】
  2. 【基本設定 [LION用]】項目を開く
  3. 【■最初に開くメニューを選択】を「Gナビメニュー」に変更

 

style.cssに追記

下記のファイルを編集

/wp-content/themes/lionmedia-child/style.css

//ヘッダー固定
.l-extra {
 display: flex;
 position: absolute;
 justify-content: space-between;
 width: 100%;
 z-index: 1000; //pickupの帯が999指定してあるので1000に
}

.l-extra.fixed {
 position: fixed;
 top: 0;
}

.key,
.categoryDescription,
.singleTitle {
 margin-top: 60px;
}

//SP表示の時
@media only screen and (max-width: 767px){
 .key,
 .categoryDescription,
 .singleTitle {
   margin-top: 50px;
 }
}

 

 

JavaScriptを追加

ヘッダーメニューをスクロール途中で上部固定する処理(jQueryとVue.js)を追加していきます。

CDNを読み込む

・jQueryを読み込む場合

<script src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>

・Vueを読み込む場合

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

 

子テーマにjsファイルを追加

子テーマディレクトリ直下にjs/index.jsを作成する。

/wp-content/themes/lionmedia-child/js/index.js

 

・jQueryで書く場合

$(function(){
     var _window = $(window),
       _header = $('.l-header'),
       _extra = $('.l-extra'),
       extraBottom,
       extraWidth,
       headerBottom;

     _window.on('scroll',function(){
       headerBottom = _header.height();
       extraBottom = _extra.height();
       extraWidth = _window.width();

       if(extraWidth < 767){
         _extra.next('.breadcrumb').css('padding-top',headerBottom + 10 + 'px');
       }else{
         _extra.next('.breadcrumb').css('padding-top',headerBottom +'px');
       }

       if(_window.scrollTop() > extraBottom){
         _extra.addClass('fixed');
       }else{
         _extra.removeClass('fixed');
       }
     });

     _window.trigger('scroll');
   });

 

・Vueで書く場合

new Vue ({
   el: '#app',
   data: {
       sc: 0,
       h_header: 0,
   },
   created() {
       // スクロール時に監視
       window.addEventListener('scroll', function() {
           var fixedNav = document.getElementById("extra__menu");
           // スクロールの長さ取得
           this.sc = window.pageYOffset;
           // l-headerの高さを動的に取得
           this.h_header = document.getElementById('l-header').clientHeight;

           if (this.sc > this.h_header){
               fixedNav.style.position = "fixed";
               fixedNav.style.top = 0;
           }else{
               fixedNav.style.position = null;
               fixedNav.style.top = null;
           }
       });
   }
});

 

 

子テーマにjs/index.jsを読み込ませる

functions.phpにjs/index.jsを読み込ませるための関数を記述していきます。

add_action( 'wp_enqueue_scripts', function() {
  wp_enqueue_script( 'index', get_stylesheet_directory_uri().'/js/index.js', array(), false, true);
});

 

詳しくは、以下の記事をご覧ください↓

WordPressのテーマに独自jsファイル(Vue.js)を読み込ませる方法
WordPressのテーマに独自で作成したjsファイル(Vue.js)を読み込ませる機会があったので、その方法について記事にしました。 【今回したいこと】 js/index.js(vue)をテーマに読み込ませたい 子テ...

 

 

以上で、動作確認ができれば成功です。