2017/07/13

一定スクロール後に出てくるナビ

ナビの高さが変わっても大丈夫な様にしたつもりだけどあまりいい動きをしない。
まだまだ勉強不足です。

See the Pen 20170713 by M.Ueda (@nekuta) on CodePen.

js(jQuery)

  // スクロール後nav出現 
  $(window).on('load resize', function() {
    //loadされたときとブラウザ幅が変わったときに動作する 
    $(function() {
      var mainNav = $('.nav');
      var navHeight = $('.nav').outerHeight(true);
      //outerHeightはpaddingとmarginを含めた高さ 
      var navHeightTop = '-' + navHeight;
      //このままだと+の値になってしまうので、-(マイナス)を付ける 
      $(window).scroll(function() {
        if ($(this).scrollTop() > 200) {
          //'fixed'というclassを付けてanimationする 
          mainNav.addClass('fixed');
          mainNav.animate({
            'top': '0'
          }, 5);
        } else {
          //'fixed'というclassを消してanimationする 
          mainNav.removeClass('fixed');
          mainNav.animate({
            'top': navHeightTop
            //navHeightTopを挿入 
          }, 5);
        }
      });
    });
  });

$(‘.nav’).outerHeight(true); で.navのpaddingとmarginを含めた高さを取得します。
しかしプラスの値を取ってきているので、var navHeightTop = ‘-‘ + navHeight;でマイナスの値にしています。