KaoLog

ぽんこつwebデザイナーのスキルのメモ

JSで作る追従メニューの実装方法をまとめてみた

f:id:s2lybb:20170617181434j:plain

 

今回は追従メニューについてまとめます。

追従メニューはiPadやスマホなど、様々なデバイスでのサイト閲覧可能になった今、とても注目されています。

 

追従メニューってなに?

追従メニューとは、スクロールすると画面に合わせてについてきてくれて、指定した位置にステイしてくれるメニューです。

この方法を使えば、スクロールをしてもSNSボタンをずっと画面内に表示することが出来ます。

実際にその動きを見てみましょう。

 

See the Pen 追従メニュー by Kaorin (@PANbooooo) on CodePen.

実際にスクロールすると分かりますが、メニューは常に画面の上に表示されています。

それではこの処理について説明していきましょう。より分かりやすくするために装飾やこの処理についての不要な部分を消したいと思います。

See the Pen 追従メニュー(装飾なし) by Kaorin (@PANbooooo) on CodePen.

ピンク色の線のみ表示されているように見えますね。スクロールすると分かりづらいと思いますが、ピンク色の線が移動しているのことが確認できると思います。

 

追従メニューの実装について

追従メニューは意外意外にも簡単で、その仕組みさえ分かってしまえばすぐに身になります。

まずはHTMLの仕組みを解明していきましょう。

HTMLはこんな感じになってます。

<div class="contents">
<div class="nav">
</div>
</div>

div class="contents"は全スクロールできる環境をつけるために入れました。

div class="nav"が今回の追従したい部分(ピンク色の線)にあたります。

必要な部分だけにするとこのように分かりやすいものになります。

 

次にcssを見てみましょう。

.contents{
height:1300px;
}
.nav{
width:100%;
background-color:#ffb6c1;
padding:20px 40px;
}
.elFollow{
position:fixed;
top: -16px;
z-index:1;
transition:all 0.3s 0.2s ease-in;
}

cssにはポイントとなる箇所があるので、上から順に丁寧に見てみましょう

 

まずは.contents{}の中身を見ていきましょう。

.contents{}で全体のスクロール量を決めるために、height:1300px;を指定します。

次に、追従するもの、ピンク色の幅についてです。.nav{}で指定します。width:100%;により、幅いっぱいに追従メニューを作成します。幅をpxで指定すると、指定したサイズのものになります。background-color:#ffb6c1;により、背景色をつけています。padding:20px 40px;という指定で、ピンク色の図形の縦の幅を広くします。これはheightでも指定可能です。
次にあるのは.elFollow{}ですが、このクラス名は、html内にはありません。じつはこの.elFollow{}はJavaScriptによってつけています。この.elFollow{}の中身はJavaScriptの説明の後に説明したいと思います。

 

ではJSを見てみましょう。

$(function(){
var nav=$(".nav");
var navPosition=nav.offset().top;
$(window).scroll(function(){
var winPosition=$(this).scrollTop();
if(winPosition>=navPosition){
nav.addClass("elFollow")
}
else if(winPosition<=navPosition){
nav.removeClass("elFollow")
}
});
});

 

JSはまだまだ私も勉強途中なので、自分の理解を深めるためにも丁寧に説明していきたいと思います。

まず$(function(){});で、なにかしらの処理を始めるということを伝えます。これはjQuery(document).ready(function() {});$(function(){});に書き換えることが出来ます。次にvar nav=$(".nav");で変数を指定します。これは、.navnavという名前をつけました。今後.navに関わることは、JS上ではnavと書かれます。次は、var navPosition=nav.offset().top;ですが、ここでさっそくnavが使われていますね。offset()でドキュメントの左上要素を起点として、位置座標を取得することができます。今回は.navtopの高さを取得してます。
$(window).scroll(function()で、スクロール時の処理を実行します。
var winPosition=$(this).scrollTop();で、また変数をしてします。今回はスクロールしたときの位置をwinPositionとしました。
if(winPosition>=navPosition){ここでif構文が出てきましたね。このif構文を分かりやすくすると『もし、winPositionnavPositionよりも大きかったら・・・』となります。少しややこしいですね・・・。
そこで私はページ全体を座標として考えてみました。
すると、『もし、winPositionnavPositionを超えたら・・・』となります。
次に、このif構文が成立したときに起きてほしい挙動を書きます。nav.addClass("elFollow")によって、navelFollowというクラス名を、条件が成立したときにだけつけることができます。
次に、もしも条件が満たなかった時の挙動を書きます。nav.removeClass("elFollow")によって、navelFollowというクラス名を、条件が成立しなかったときにだけ取り除くことができます。

 

JSの説明は以上となります。

しかし、これだけでは追従メニューは出来上がりません。このelFollowというクラス名に装飾を書くことで、追従メニューを完成させます。それでは見てみましょう。

 

 .elFollow{
 position:fixed;
 top: -16px;
 z-index:1;
}

position:fixed;top: -16px;の指定により、追従位置を指定します。次に、z-index:1;により、他の要素と重なったときに、優先して表示するようしていします。

 

追従メニューができるだけで、サイトもおしゃれに見せることができます。

ぜひともお試しください