jQueryでスクロールしたら上からヌルっと出て来るヘッダーを実装する

参考：【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法 – North-Geek

参考サイトだと、ヘッダーはトップイメージの下にあり、そこが基準になっていますが、今回は下記のようにしました。

1. 一番上にある
2. 最初はabsolute
3. 一定の位置までスクロールするとfixedに
4. その時、アニメーション上から下りてくるように表示する

js

$(function() {
    var headNav = $("#header");

//scrollだけだと読み込み時困るのでloadも追加
    $(window).on('load scroll', function(){

//現在の位置が500px以上かつ、クラスwhiteが付与されていない時
      if($(this).scrollTop() > 500 && headNav.hasClass('white') == false) {

//headerの高さ（100px）分上に設定
        headNav.css({"top": '-100px'}); 

//クラスwhiteを付与
        headNav.addClass('white');

//位置を0に設定し、アニメーションのスピードを指定
        headNav.animate({"top": 0},400); 
      }

//現在の位置が100px以下かつ、クラスwhiteが付与されている時
      else if($(this).scrollTop() < 100 && headNav.hasClass('white') == true){

//クラスwhiteの除去
        headNav.removeClass('white');
      }
    });
  });