スマホ(iPhoneのsafari)のようにナビをスクロールの方向によって表示したり非表示にしたりする

私はiPhoneユーザーなのですが、safariの下部にあるメニューって下へスクロールする時は消え、上へスクロールしている時は表示されてますよね？

PCのページにもそのようなメニューが増えてきているとは思います。

そこで試しに作ってみました。

早速ですが、DEMOをご覧ください！

DEMO

jQueryとcss3で実装しています。

ソース

html


<div class="navi">
    <ul>
        <li><a href="">HOME</a></li>
        <li><a href="">Recruit</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Access</a></li>
    </ul>
</div>

<ul>

<li><a href="">Recruit</a></li>

<li><a href="">Contact</a></li>

<li><a href="">Access</a></li>

</ul>

</div>

css


.navi {
	background-color: #e47911;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	-webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
	z-index: 9999;
}
.navi ul {
	width: 100%;
	text-align: center;
}
.navi li {
	display: inline-block;
}
.navi li a {
	color: #fff;
	padding: 15px 30px;
	text-decoration: none;
	display: block;
	font-size: 13px;
}

.navi {

background-color: #e47911;

position: fixed;

width: 100%;

top: 0;

left: 0;

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

z-index: 9999;

}

.navi ul {

width: 100%;

text-align: center;

}

.navi li {

display: inline-block;

}

.navi li a {

color: #fff;

padding: 15px 30px;

text-decoration: none;

display: block;

font-size: 13px;

}

jQuery


$(function(){
	var defPos = 0;
	$(window).scroll(function(){
	  var currentPos = $(this).scrollTop();
	  if (currentPos > defPos) {
	    if($(window).scrollTop() >= 400) {
	      $(".navi").css("top", "-50px");
	    }
	  } else {
	    $(".navi").css("top", 0 + "px");
	  }
	  defPos = currentPos;
	});
});