アトリエロワ

スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる（消える）

ヘッダーを固定

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

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

HTML

<div id="d-header">ここにメニュー</div>

js

$(function () {
  const headNav = $('#d-header');
  let isFixed = false; // fixedクラスが付与されているかどうかを保持する変数

  // 初期状態では#d-headerを非表示にする
  headNav.css({top: '-60px'});

  $(window).scroll(function () {
    // スクロール量が200px以上かつクラスfixedが付与されていないとき
    if($(this).scrollTop() > 200 && !isFixed) {
      //クラスfixedを付与
      headNav.addClass('fixed');
      isFixed = true; // isFixedをtrueに設定

      // 位置を0に設定し、上から下りてくるスピードを設定
      headNav.stop().animate({top: 0}, 1000);
    }
    // スクロール量が200px以下かつクラスfixedが付与されているとき
    else if($(this).scrollTop() <= 200 && isFixed){
      // クラスfixedを外す
      headNav.removeClass('fixed');
      isFixed = false; // isFixedをfalseに設定

      // 上にスクロールして#d-headerがtop0の座標になったら、topの位置を-60pxに設定
      headNav.stop().animate({top: '-60px'}, 1000);
    }
  });
});

css

#d-header.fixed {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
}

HOME > javascript > スクロールするとメニューが上からゆっくり降りてきてヘッダー固定・Y座標0でメニューがスムーズに上がる（消える）

javascript

javascript

+ More