Wordpress

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

  1. HOME >
  2. Wordpress >

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

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

フッターメニューを作る

  • オリジナルのフッターメニューを作りたい。
  • スクロールアクションに合わせて、スライドイン・スライドアウトするメニューにしたい。

ココがポイント

結論:
ユーザーのスクロールバーアクションに合わせて、Webページの内容を変更したい場合は、JavaScriptの「scroll」を使用する。

皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。

ユウスケ

皆様は、Webページを作成していると、画面スクロールに合わせて移動するフッターメニューを作ってみたいと思ったことはございませんか?そして、できれば、スクロールに合わせて隠れたり現れたりするものにしたい。

今回は、HTML・CSSで自作のフッターをデザインし、画面TOPでは隠れて、スクロールすると現れる、またページ最下部では隠れるという、動きのあるフッターメニューをご紹介しようと思います。

 

1.画面と一緒にスクロールするフッターメニュー

See the Pen
footer
by 三好雄介 (@yusuke5028198)
on CodePen.

Webページの下に固定されたフッターメニューを作成しています。ページのトップでは画面外に隠れていて、スクロールすると画面内に表示されます。また、ページの最下部に来ると、時間を置いてから画面外に隠れるようにしています。「class="list"」内に項目を増やせば、自動で高さが変化し、横幅が均等に配置されるようになっております。

参考

CSSのコードの意味

#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」を指定して、幅を均等に配分するようにしています。

プロパティ名 反映内容
flex-grow フレックスコンテナの幅が十分に広くて、各フレックスアイテムのflex-basisプロパティの合計を上回っている場合、余った余白を個々のフレックスアイテムに配分します。
flex-shrink フレックスコンテナの幅が狭くて、各フレックスアイテムのflex-basisプロパティの合計値を下回っている場合は、個々のフレックスアイテムの幅を縮めて、フレックスコンテナに収まるように表示されます。
flex-basis フレックスアイテムの基準の幅を指定するプロパティです。
値として「auto」を指定すると、フレックスアイテムのwidthプロパティの値が使われます。

JavaScriptのそれぞれのコードの意味

$(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%分下に移動させる命令になっています。

 

もっと詳しく

 

2.ラジオボタンで複数のメニューボタンを連動させる

皆様は、片方のボタンをクリックしたら、もう片方のボタンで表示していた内容をたたんで隠しておきたい。そのように、メニューボタンを連動させたいと思ったことは、ございませんか?

次のリンクでは、input要素typeを「ラジオボタン」にすることで、複数のメニューボタンを連動させて、開閉できる方法について、解説しております。

フッターメニューを作成した後に、メニューボタンを連動させたいと思ったら、チェックしてみてください。

もっと詳しく

 

まとめ

お疲れ様でした。

フッターメニューはスマートフォンでは、よく見かけるメニューです。自作することで、いろいろなメニューを登録できるようになると、Webページのカスタマイズの幅が広がると思います。追加してみたいメニューをいれてみては、いかがでしょうか?

最後まで、ご一読いただきありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.