アトリエロワ

上からゆっくり降りてきてヘッダー固定

ヘッダーを固定

一定の高さまでスクロールすると、タグ「header」にclass=”fixed”が付く

上からゆっくり降りてくる

js

$(window).on("load", function () {
  $(function () {
    var headNav = $("header");
    //scrollだけだと読み込み時に挙動がおかしい
    $(window).on("load scroll", function () {
      //現在の位置が一定以上かつ、クラスfixedが付与されていない時
      if ($(this).scrollTop() > 20 && headNav.hasClass("fixed") == false) {
        //headerの高さ分上に設定
        headNav.css({ top: "-160px" });
        //クラスfixedを付与
        headNav.addClass("fixed");
        //位置を0に設定し、アニメーションのスピードを指定
        headNav.animate({ top: 0 }, 80);
      }
      //現在の位置が一定以下かつ、クラスfixedが付与されている時にfixedを外す
      else if ($(this).scrollTop() < 20 && headNav.hasClass("fixed") == true) {
        headNav.removeClass("fixed");
      }
    });
  });
});

HTML

  /*ヘッダー*/
  header {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }
  header.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
  }

HOME > javascript > 上からゆっくり降りてきてヘッダー固定

javascript

javascript

+ More