【賢威8】スマホのフッターパネルをスクロールに応じて表示/非表示を切り替える



フッターパネルとは

フッターパネルとは

これです。

最近では基本的にほとんどのアクセスがスマホですので、標準でフッターパネルが搭載されているテンプレートなども多いと思います。

このブログのテンプレート「賢威8」でもフッターパネルは標準搭載です。

フッターパネルは必要か?

もちろんあるに越したことはないと思うのですが、この限られたスマホの画面の面積を、常時占有し続けるのはユーザビリティ的にいかがなものか?と思うわけです。

当サイトでは「シェア、お問い合わせ、TOPへ」の3項目を表示しておりますが、きっちり計測してないですが、押されたことがあるのか甚だ疑問でもあります。

ということで、必要ない時(ユーザーが記事を読み進めているとき)はフッターパネルを非表示に、必要になったら(記事途中で立ち止まってスクロールアップで戻ろうとすると)フッターパネルを表示させる、という仕様にカスタマイズします。

フッターパネルをスクロールでトグル化

JQuery CDN

JQueryの設定をしていない方は<head>~</head>タグ内の出来るだけ上の位置に下記コードを追加して事前に読み込む必要があります。

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

基本的にワードプレスであればディフォルトでjQueryの読み込みが行われていますので上記コードは不要かと思います。

JavaScript(JQuery)

上のJQuery CDN の読み込みコードより下の位置、もしくはワードプレスの標準で読み込まれるjQueryより下の位置であればどこに記載しても動きます。

基本的には<head>~</head> タグ内に置くことをオススメします。

賢威8の場合は埋め込みコード設定の「</head>直前に記述するコード」の所にそのままコピペすればOK。

//フッターパネルアニメーション処理
jQuery(function($) {
  var pos = 0;
  $(window).on('scroll', function(){
    //
    if($(this).scrollTop() < pos ){
      //上スクロール時
      $('.keni-footer-panel_wrap').removeClass('panel_hide');
    }else{
      //下スクロール時
      $('.keni-footer-panel_wrap').addClass('panel_hide');
    }
    //スクロールが停止位置
    pos = $(this).scrollTop();
  });
});

賢威8以外のフッターパネルのカスタムをしたい方は、

'.keni-footer-panel_wrap'

の部分をご自身のテーマのフッターパネルのクラス名に変更すればそのまま動きます

CSS

CSSも必要です。

.panel_hide{
  transform: translateY(50px);
}

上記コードをテーマのstyle.cssに記述して更新します。

以上で作業完了です。

フッターパネルのスクロールトグル
完成形