【jQuery】ヘッダーメニューが下スクロールで消え、上スクロールで現れるアニメーション【iOSにも対応可】

  <header class="l-header">

    <!-- ヘッダーのメニューバー（出たり消えたりする） -->
    <div class="header-bar">
      <!-- 以下はヘッダーの中身：自由に書いて下さい -->
      <h1 class="c-h1">SIMS-CODE</h1>
      <nav class="p-nav">
        <ul class="p-nav_ul">
          <li class="p-nav_li"><a href="#" class="p-nav_li-a">Menu 1</a></li>
          <li class="p-nav_li"><a href="#" class="p-nav_li-a">Menu 2</a></li>
        </ul>
      </nav>
    </div>

  </header>

/* スクロールが末端に達したときのバウンスを禁止するCSS（PC専用：無くても良い） */
body {
  overscroll-behavior-y: none;
}

/* ヘッダーのメニューバー（出たり消えたりする） */
.header-bar{
  width: 100%;
  height:80px;
  position: fixed;
  transition: .5s;
  /* 以下、体裁を整えるCSSなので直接関係ない */
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #5C6F96;
  padding: 0 20px;
  color: #fff;
}
/* ヘッダーのメニューバーが消えるときのCSS */
.header-bar.hide {
  transform:translateY(-100px);
}

$(function(){
  //変数を定義
  var pos = 0, winScrollTop = 0;
  // PC用ヘッダー
  var header = $('.header-bar');
  
  $(window).on('scroll', function () {
    winScrollTop = $(this).scrollTop();

    //下に200pxスクロールした時
    if (winScrollTop >= pos) {
      if (winScrollTop >= 200) {
        header.addClass('hide');
      }
    //上にスクロールした時
    } else {
      header.removeClass('hide');
    }
    pos = winScrollTop;

  });
});