スクロールしたらヘッダーにメニューを固定表示するjQuery

人様のソースコードを読み解くシリーズです。前回の続きです。

2.スクロールするとヘッダーに固定表示(アニメーションバージョン)

Java Script

$(function() {
   var nav = $('.nav');
   //表示位置
   var navTop = nav.offset().top+500;
   //ナビゲーションの高さ(シャドウの分だけ足してます)
   var navHeight = nav.height()+10;
   var showFlag = false;
   nav.css('top', -navHeight+'px');
   //ナビゲーションの位置まできたら表示
   $(window).scroll(function () {
      var winTop = $(this).scrollTop();
      if (winTop >= navTop) {
         if (showFlag == false) {
            showFlag = true;
            nav
               .addClass('fixed')
               .stop().animate({'top' : '0px'}, 200);
         }
      } else if (winTop <= navTop) {
         if (showFlag) {
            showFlag = false;
            nav.stop().animate({'top' : -navHeight+'px'}, 200, function(){
               nav.removeClass('fixed');
            });
         }
      }
   });
});

これも前回同様、『フラグ(showFlag)』を入れていますが、『.stop()』の代わりに『:not(‘:animated’)』を使用することで代用できそうです。

Java Script

$(function() {
   var nav = $('.nav');
   //表示位置
   var navTop = nav.offset().top+500;
   //ナビゲーションの高さ(シャドウの分だけ足してます)
   var navHeight = nav.height()+10;
   nav.css('top', -navHeight+'px');
   $(window).scroll(function () {
      if ($(this).scrollTop() > navTop) {
            nav
               .addClass('fixed')
               .not(':animated').animate({'top' : '0px'}, 200);
      } else {
            nav.not(':animated').animate({'top' : -navHeight+'px'}, 200, function(){
               nav.removeClass('fixed');
            });
      }
   });
});

あと、よくわからないのに、わざわざ『var navTop = nav.offset().top+500;』としているところ。単純に500じゃダメなのかな?

Java Script

$(function() {
   var nav = $('.nav');
   //表示位置
   //ナビゲーションの高さ(シャドウの分だけ足してます)
   var navHeight = nav.height()+10;
   nav.css('top', -navHeight+'px');
   $(window).scroll(function () {
      if ($(this).scrollTop() > 500) {
            nav.addClass('fixed')
               .not(':animated').animate({'top' : '0px'}, 200);
      } else {
            nav.not(':animated').animate({'top' : -navHeight+'px'}, 200, function(){
               nav.removeClass('fixed');
            });
      }
   });
});

あともうひとつ、わからないところとしては、『.addClass()』『.removeClass()』の使い方。『.addClass()』のほうはチェーンメソッドなのに対して、『.removeClass()』のほうはコールバックしてる。

『.addClass()』とか使わないで、直接CSSで.navを絶対配置にしておけばよいんじゃないんかな?わざわざ固定の指定を設定したり解除したりしなくても良いかと思われます。

CSS

.nav {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   border-radius: 0;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -o-border-radius: 0;
}

これでだいぶすっきりしたんじゃないかな?

Java Script

$(function() {
   var nav = $('.nav');
   //ナビゲーションの高さ(シャドウの分だけ足してます)
   var navHeight = nav.height()+10;
   nav.css('top', -navHeight+'px');
   $(window).scroll(function () {
      if ($(this).scrollTop() > 500) {
            nav.not(':animated').animate({'top' : '0px'}, 200);
      } else {
            nav.not(':animated').animate({'top' : -navHeight+'px'}, 200);
      }
   });
});