【AFFINGER6】スクロール方向でスマホ用(固定)フッターメニューをON-OFF表示させて視認性UP

スポンサーリンク

 

(スマホ・画面)

【AFFINGER6】の管理画面(メニュー設定ページ)から「スマホフッターメニューを表示する」にレ点を入れて保存するとフッターメニューがスマホ画面の下に常時固定されて表示される様になります。(スマホ・画面 参照)

この欠点は、フッターメニューがスマホ画面の一部を常に専有するのでブログ本文の表示領域が減少して視認性の悪化に繋がります。

そこで簡単な jQuery スクリプトを使って、下スクロールでフッターメニューを非表示に、上スクロールで表示する様にして視認性の改善を試みました。

なお、【AFFINGER6】「スマホフッターメニュー」の設定方法は、色々なサイトで紹介されていますので、ここでは割愛します。 

 

スポンサーリンク

 

スクロールの上下を検知してスマホフッターメニューを ON-OFFする(デモ 動画)

動画の説明

  • 下にスクロール (↓)すると
    フッターメニューが非表示
  • 上にスクロール (↑)すると
    フッターメニューが表示

 

 

スマホフッターメニューを ON-OFFする jQueryスクリプトと設置


  • 「スマホフッターメニュー」の要素を調べる

    Chromeブラウザの「検証」から「スマホフッターメニュー」部分の要素を調べると、【Affinger6】の「スマホフッターメニュー」の要素(id)は divの#st-footermenubox で定義されてることが判りました。


  • jQueryスクリプトの作成

    簡単な説明

    • 上スクロールが発生すると、11行目の show()メソッド で #st-footermenubox 要素を表示させています。
    • 下スクロールが発生すると、14行目の hide()メソッド で #st-footermenubox 要素を非表示にさせています。
    • (もし、表示動作を逆にしたい時は、show() hide() を入れ替えます。)

  • 【Affinger6】にjQueryスクリプトを配置する

    【AFFINGER6】の管理画面から「その他」ページで「 </> コードの出力 」セクションに移動して「</body>直前に出力するコード」のコード記述エリアに前記「jQueryスクリプト」1行目〜20行目のコード全てをコピペして【SAVE】ボタンを押して完成です。


 

以上、【Affinger6】「スクロール方向でスマホ用(固定)フッターメニューをON-OFF表示させる」方法でした。 非常に簡単に実現できますので是非お試しください。

 

スポンサーリンク

 

 

Blog オススメ記事(コンテンツ選択)
  • レコード音質とハイレゾ化

  • CD音質と圧縮音源 AAC等

  • WordpressやiPhone・PC

  • ツールと閑話ブログ

レコード音質とハイレゾ化

CD音質と圧縮音源 AAC等

WordpressやPCなど

ツールと閑話ブログ

スポンサーリンク