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

Yukimi Sato 62views 更新:2016年10月24日

参考:【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');
      }
    });
  });

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません