Java scriptで、○○○px以下の場合に、ヘッダーが下からニュルッと消えるアニメーション

Question

前提・実現したいこと

ホームページのヘッダーを、
例えば、現在の位置が500px以上なら、
固定表示するプログラムをJava scriptで見つけました。

以下は実現できています。

500px以上なら、上からニュルッ（アニメーション）と固定表示され、
500px以下なら、スッと消える（アニメーションなし）ヘッダー。

実現したいのは、

500px以下なら、下からニュルッ（アニメーション）と消えるヘッダーです。

発生している問題

○○○px以下の場合に、ヘッダーが下からニュルッと消えるアニメーションが付けられない

該当のソースコード

$(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": '-62px'});
			//クラスfixedを付与
			headNav.addClass('fixed');
			//位置を0に設定し、アニメーションのスピードを指定
			headNav.animate({"top": 0},600);
		}
		//現在の位置が500px以下かつ、クラスfixedが付与されている時にfixedを外す
		else if($(this).scrollTop() < 500 && headNav.hasClass('fixed') == true){
			headNav.removeClass('fixed');
		}
	});
});

<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{
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;
}

試したこと

特になし

補足情報（FW/ツールのバージョンなど）

特になし

Comments

[m.ts10806]

提示コードは「300未満」になってるようですが

[退会済みユーザー]

ご指摘ありがとうございます。
コードを修正しました。

[m.ts10806]

あとはhtml、cssもご提示ください。JavaScriptだけでは再現確認できませんので

[退会済みユーザー]

ご指摘ありがとうございます。cssとhtmlを記載いたしました。何卒よろしくお願い致します。

Answer 1

細かいところは調整していませんが、こんな感じでしょうか。

var f = true;

//...

//現在の位置が500px以下かつ、クラスfixedが付与されている時にfixedを外す
    else if($(this).scrollTop() < 500 && headNav.hasClass('fixed') && f ){
        f = false;
        headNav.animate({"top": '-62px'},600).promise().then(function(){
          headNav.removeClass('fixed');
          f = true;
        });
        
    }