【jQuery】スクロールすると上からニョキっと出てきてそのまま追従するメニューの実装方法

スクロールするとメニュー（この場合は主にグローバルナビ）が一旦流れるのですが、そのままスクロールしていくと上からニョキっと出てきてそのまま追従するタイプのエフェクトがあります。

まずはサンプルをご覧ください。

See the Pen KyWddO by OKD (@OKD) on CodePen.

今回のポイントはこちら。

1. スクロールすると上からグローバルナビがスライドして降りてくる
2. そのまま画面TOPに固定されて追従する
3. スクロールしてきた時に表示されるメニューは最初に表示されるよりも高さを狭くして表示領域を広く保つ

サンプルのcodepenでもコードは見れますが簡単な解説も踏まえて実装方法を紹介します。

HTML

<header>
	<nav class="g-nav">
		<ul class="g-nav-menu">
			<li>HOME</li>
			<li>ABOUT</li>
			<li>CONTCT</li>
		</ul>
	</nav>
</header>

<section id="sec01">
	<p>コンテンツ1</p>
</section>
	
	<section id="sec02">
	<p>コンテンツ2</p>
</section>
	
	<section id="sec03">
	<p>コンテンツ3</p>
</section>

header部分の構成が同じであれば後で紹介するjqueryも同じように動きます。ご参考までに。

jQuery

$(function() {
	var headNav = $("header");
	//scrollだけだと読み込み時困るのでloadも追加
	$(window).on('load scroll', function () {
		//現在の位置が500px以上かつ、クラスfixedが付与されていない時
		if($(this).scrollTop() > 500 && headNav.hasClass('fixed') == false) {
			//headerの高さ分上に設定
			headNav.css({"top": '-100px'});
			//クラスfixedを付与
			headNav.addClass('fixed');
			//位置を0に設定し、アニメーションのスピードを指定
			headNav.animate({"top": 0},600);
		}
		//現在の位置が300px以下かつ、クラスfixedが付与されている時にfixedを外す
		else if($(this).scrollTop() < 300 && headNav.hasClass('fixed') == true){
			headNav.removeClass('fixed');
		}
	});
});

ポイントはスクロールする高さ（スクロールする量）によってheadrに「fixed」というクラスを付け外しする部分です。
※jQuery本体の読み込みも忘れずに

CSS

header{
background: #155263;
position: relative;
width: 100%;
}
.g-nav{
width: 100%;
z-index: 10;
}
.g-nav-menu{
text-align: center;
}
.g-nav-menu li{
color: #fff;
padding: 0 30px;
list-style-type: none;
display: inline-block;
line-height: 80px;
}
.fixed{
position: fixed;
top: 0;
left: 0;
}
.fixed .g-nav-menu li{
line-height: 40px;
}
section{
display: table;
width: 100%;
height: 800px;
text-align: center;
}
section p{
display: table-cell;
vertical-align: middle;
color: #fff;
}
#sec01{
background: #FF6F3C;
}
#sec02{
background: #FF9A3C;
}
#sec03{
background: #FFC93C;
}

headerにfixedが付与されるとpositionがfixedになるところがポイントです。
あとはなるべくスクロールしている時に表示領域をナビで狭くしたくないので、ナビがfixedになっている場合は高さを狭くするように記述しています。
今回はline-heightで調整してますが、paddingでもmarginでも仕様によって調整してもらえれば大丈夫です。

CSSの記述時に一つだけ注意点があります。
headerをゆっくりアニメーションさせたいからといって「transition: all .3s;」などtransition系のcssと組み合わせたりすると場合によっては上からニョキっと降りてくるアニメーションが動かなくなる場合がありますのでご注意ください。