画面スクロールについてくるフッターメニューを作る方法【WordPress】【CSS】【JavaScript】

#footerMenuBar-MobileTablet .list a{
  text-decoration: none;
  color: #fff;/*文字色*/
  flex: 1 1 auto;/*エリアを等分割*/
  text-align: center;
  display: inline-block;
}

このブロックで、フッターメニューのそれぞれのアイコンのスタイルを指定しています。

4行目：flex: 1 1 auto;

flexプロパティでは、順にflex-grow→flex-shrink→flex-basisの値を指定しています。今回は、flex-growとflex-shrinkに「1」を指定して、幅を均等に配分するようにしています。

$(window).on('scroll', function(){
  var doch = $(document).innerHeight();/*ドキュメントの高さ*/
  var winh = $(window).innerHeight();/*ウィンドウの高さ*/
  var bottom = doch - winh;/*ページ最下部のスクロールトップの高さ*/
  if (bottom <= $(window).scrollTop()){
    /*一番下までスクロールした時に実行*/
    setTimeout(function(){
      $("#footerMenuBar-MobileTablet").css('transform','translateY(105%)');
    },5000);/*5秒後に実行*/
  }else if(100 <= $(window).scrollTop()){
    /*ページトップからスクロールしたとき*/
    $("#footerMenuBar-MobileTablet").css('transform','translateY(0%)');
  }else{
    /*その他の時*/
    $("#footerMenuBar-MobileTablet").css('transform','translateY(105%)');
  }
});

1行目：$(window).on('scroll', function(){

ここで、画面がスクロールされたときに、以下の処理を実行しています。

2～3行目：var doch = $(document).innerHeight(); var winh = $(window).innerHeight();

この行で、それぞれのWebページの高さと、ユーザーのウィンドウの高さの値を、各変数に代入しています。

4行目：var bottom = doch - winh;

この行で、Webページの高さから、ユーザーのウィンドウの高さを引いた、ページ最下部までスクロールしたときのウィンドウ画面上部の位置を、変数「bottom」に代入しています。jQueryでは「scrollTop()」メソッドでウィンドウ画面上部の位置を取得できるので、「bottom」の値と比較して、アクションを場合分けできるようになります。

5行目：if (bottom <= $(window).scrollTop())

ページ最下部でのウィンドウ画面上部の位置以上、つまり最下部よりさらに下までスクロールした時の条件です。条件を「bottom - 100 <= $(window).scrollTop()」や「bottom * 0.9 <= $(window).scrollTop()」として値を小さくすることで、ページ最下部までスクロールする前から以下の関数を実行するといったことも行えます。

7～8行目：setTimeout(function(){},5000);

このメソッドでアクションを遅延させています。

9行目：if(100 <= $(window).scrollTop())

この条件は、Webページの最上部（ページトップ）から100px（ピクセル）以上スクロールしたときの条件になります。ここで、フッターメニューをウィンドウ画面の下から表示させています。

12行目：else

12行目で上の2つの条件以外で以下を実行する条件にしています。「ページ最下部」と「100px以上スクロールしたとき」、この2つの条件以外なので、ページトップで実行する条件になっています。

14行目：$("#footerMenuBar-MobileTablet").css('transform','translateY(105%)');

フッターメニューを、その高さの105％分下に移動させる命令になっています。