WEBサイト制作の事業を行なっていると毎日たくさんのWEBサイトを拝見します。

その中でとても気になるポイントの一つが、スマホ表示の下部固定メニューが最後まで下部にとどまり続けることです。

WEBサイトをパソコンで閲覧する場合は関係ないことがほとんどですが、スマホで閲覧する場合は画面下部にメニューを固定で表示させるデザインにするケースがよくあります。

どんなタイミングでも分かりやすくお問い合わせなどができる便利な下部固定メニューですが、弊害となってしまうケースもあります。

それが、1番下までスクロールした時です。

一見は何も問題がないように思いますが、実は下部固定メニューによってコピーライトが隠れてしまっているのです。

コピーライトとは著作権表示のことですが、全てのWEBサイトの最下部は「フッター」と呼ばれるエリアになっており、このフッターにコピーライトが設置されることがほとんどです。

コピーライトは閲覧ユーザーに見えていなければいけませんが、デザインによっては下部固定メニューによって隠れてしまうケースがあるのです。

このような状態を避ける方法としては２つあります。

【１つ目の方法】最下部の余白を大きく取る

最下部の余白を大きく取ることで下部固定メニューがさらに下まで移動が可能となり、コピーライトと下部固定メニューが被らないようになります。

【２つ目の方法】1番下までスクロールしたら下部固定メニューを上に移動させる

プログラミングによる処理の追加が可能な場合は、1番下までスクロールしたら下部固定メニューを上に移動させるということが可能です。

1番下までスクロールしたら下部固定メニューを上に移動させる処理

jQueryを使って画面の1番下までスクロールしたかどうかを判定し、していればクラスを付与する処理を記述します。そのコードが下記です。

jQueryによる処理コード

$(window).bind(“scroll”, function() {

　scrollHeight = $(document).height();

　scrollPosition = $(window).height() + $(window).scrollTop();

　if ( (scrollHeight – scrollPosition) / scrollHeight <= 0) {

　　$(‘.bottom-fixedmenu’).addClass(‘action’);

　} else {

　　$(‘.bottom-fixedmenu’).removeClass(‘action’);

　}

});

上記コードは、1番下までスクロールしたらクラス名「bottom-fixedmenu」に「action」というクラス名を追加するという処理です。

※下部固定メニューにクラス名「bottom-fixedmenu」が付与されている想定です。

あとは、「bottom-fixedmenu」に「action」が追加された場合のCSSコードを記述すれば完了です。

【最後に】ホームページのクオリティが高く見えるのは自動で上に移動する方法！

今回は、下部固定メニューとコンテンツが被ってしまった際の対処方法をご紹介しましたがいかがでしたでしょうか。

余白を大きく取って被らないようにするのも素晴らしい方法です。

しかし、1番下までスクロールしたら下部固定メニューが勝手に上に移動するような動きはもっと素晴らしいと思います。

何の対処もせずに被ったままとなっている残念なWEBサイトも多く、そういった状態は論外として、対処方法も一手間加えることでホームページのクオリティは大なり小なり向上します。

ホームページのクオリティを追求したい方はぜひ参考にしてみてください。

記事一覧に戻る