jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー

最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを2つくらい(サイト名は忘れてしまいました。。)見かけて、これは流行っているのではないかということで作ってみました。

scroll-up-down.png

実際の動きは下のサンプルでご確認ください。

メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。

<nav id="menu-wrap">
  <ul id="menu">
    <li><a href="#">menu1</a></li>
    <li><a href="#">menu2</a></li>
    <li><a href="#">menu3</a></li>
    <li><a href="#">menu4</a></li>
    <li><a href="#">menu5</a></li>
  </ul>
</nav>

続いてCSSです。

#menu-wrap {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  background: rgba(0,0,0,.5);
  transition: .3s;
}
#menu {
  list-style-type: none;
  width: 960px;
  margin: 0px auto;
  padding: 0;
}
#menu li {
  width: 20%;
  float: left;
  margin: 0;
  padding: 0;
  text-align: center;
}
#menu li a {
  display: block;
  width : 100%;
  padding: 20px 0;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  transition: .3s;
}
#menu li a:hover {  background: rgba(0,0,0,.3) }

こちらも普通です。メニューは固定していますので、position: fixed;を指定しています。で、topの値をスクロールの方向によって変えることで、「下にスクロールで消えて、上にスクロールで現れる」を作ります。

で、その仕組みはjQueryを作ります。

var menuHeight = $("#menu-wrap").height();
var startPos = 0;
$(window).scroll(function(){
  var currentPos = $(this).scrollTop();
  if (currentPos > startPos) {
    if($(window).scrollTop() >= 200) {
      $("#menu-wrap").css("top", "-" + menuHeight + "px");
    }
  } else {
    $("#menu-wrap").css("top", 0 + "px");
  }
  startPos = currentPos;
});

では、ここからは1行ずつ解説していきます。

1行目 : var menuHeight = $("#menu-wrap").height();

メニュー全体の高さをmenuHeightとします。下にスクロールしたときにメニューを隠すためにこの値が必要となります。

2行目 : var startPos = 0;

スクロールの基準を、startPosとします。最初はスクロールしていませんので値は0です。それ以降、この値はスクロールし始めた位置となります。

3行目 : $(window).scroll(function(){

3行目以下はスクロールするたびに呼び出されます。

4行目 : var currentPos = $(this).scrollTop();

スクロールしたときの位置をcurrentPosとします。

5行目 : if (currentPos > startPos) {

スクロールしたときの位置currentPosの値が、スクロールの基準となる位置startPosの値より大きいか小さいかで、上にスクロールしたか、下にスクロールしたかを判別します。

currentPos>startPosとなる場合は、下にスクロールしていることになります。反対の場合は上へのスクロールとなります。

6行目 : if($(window).scrollTop() >= 200) {

下にスクロールのときに、さらに「200px以上スクロールしているか」という条件をつけています。

なくてもいいのですが、ちょっと下にスクロールしただけでメニューが消えてしまうのも不便なので、200px以上スクロールしてから消えるようにしています。

7行目 : $("#menu-wrap").css("top", "-" + menuHeight + "px");

下にスクロールしたときに、メニューの高さ分だけ画面の上に持ってきます。メニューの高さが40pxでしたらtop: -40px;となります。

メニューの高さをheightなどできっちり指定している場合は、変数ではなく、その高さを指定してあげれば大丈夫です。

10行目 : $("#menu-wrap").css("top", 0 + "px");

currentPos>startPosとならない場合、すなわち上にスクロールした場合に呼び出される内容です。

上にスクロールしたときはメニューを表示するため、top: 0px;となります。

12行目 : startPos = currentPos;

最後に、基準となるstartPosの値を、スクロールしたと後のcurrentPosと同じにします。

これは、次にスクロールしたときの基準を決めておく必要があるためです。次にスクロールしたときはこの値を基準として、上にスクロールしたか、下にスクロールしたのかを判定します。

さいごに

ということで、下にスクロールで消えて、上にスクロールで現れる固定メニューを紹介しました。

上に固定されているメニューはよく見かけますが、常に表示されているため大きすぎたりすると、煩わしいと感じる人もいるかもしれません。

そんな場合に使えるかもしれないですね。お役に立てばうれしいです。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
この記事で紹介されているデモサイトを拝見しました。スクロールするとボックスが降りてきたりするように見える動き、こちらは何で実装されていらっしゃるのでしょうか?使っているJquery、JavaScript等を教えていただけないでしょうか?
【2015/08/25 11:05】 | Tsubasa #- | [edit]
Tsubasaさん

すいません、どの部分のことを仰られているのか分かりませんが、
このデモのメニュー以外の部分は以下の記事のものを使っています。
http://weboook.blog22.fc2.com/blog-entry-411.html

参考になるかもしれないです。

今後もよろしくお願いします。
【2015/08/25 19:46】 | 管理人 #E2ywrYdA | [edit]
こちらを拝見し、参考にしてメニューをスクロールに応じて開閉できるようにしようと検討していますが、IE11(OS:Win10)でデモを見ると、スクロール中はメニューが消えていますが、スクロールが止まるとメニューが現れるようです。間違いではなく仕様かも知れませんが、改修方法などご存知でしたら反映して頂ければと思います。
【2017/02/11 15:51】 | Daisuke #- | [edit]
上記の件、自己解決しました。
どうやらIE11の場合、else だけではどうもそこを読んでしまうのか、else ifで具体的にその他の条件を入れないとダメなのか、else ifで条件指定したらIE11でも正常動作するようになりました。
【2017/02/11 16:19】 | Daisuke #- | [edit]
クライアントワークにいつも使わせていただき、とても助かっております。
ありがとうございます。

IE11でスクロールを止めた時に、
隠れたはずの要素が戻ってしまう現象に困っておりましたが、
Daisukeさんのコメントで無事解決できました。

9行目を、
} else if (currentPos < startPos) {
ってことですね。

ありがとうございました。
【2018/05/01 13:21】 | tama #Mk4MrfiU | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加