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

ヘッダーを固定

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

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

HTML

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

js

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

  function checkScroll() {
    if (window.matchMedia('(min-width: 767.01px)').matches || window.matchMedia('print').matches) {
      const scrollTop = $(window).scrollTop();
      
      if(scrollTop > 200 && !isFixed) {
        headNav.addClass('fixed');
        isFixed = true;
        headNav.stop().animate({top: 0}, 1000);
      } else if (scrollTop <= 200 && isFixed) {
        headNav.removeClass('fixed');
        isFixed = false;
        headNav.stop().animate({top: '-60px'}, 1000);
      }
    } else {
      // 767px以下では、ナビゲーションを固定しない
      headNav.removeClass('fixed');
      headNav.css({top: ''});
      isFixed = false;
    }
  }

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

  // スクロールイベントを設定
  $(window).scroll(checkScroll);

  // 初回実行で現在のスクロール位置をチェック
  checkScroll();

  // 画面サイズが変更されたときにも再チェック
  $(window).resize(checkScroll);
});

css

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

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);
    }
  });
});