scroll-toggle-header vue.js nuxt.js

toggle-header

<template>
  <header class="header">
    header
  </header>
</template>

<script>
if (process.browser) {
  var lastST = $(window).scrollTop(); //初期スクロール位置の取得
  function hideGlobalNav(e) {
    var scrollTop = $(window).scrollTop(); //スクロール位置の取得
    var threshold = 100; //許容するスクロール量
    if (lastST > scrollTop) {
      if ($(".header").hasClass("hide")) $(".header").removeClass("hide"); //クラスの削除
    } else if (scrollTop > threshold) {
      if (!$(".header").hasClass("hide")) $(".header").addClass("hide"); //クラスの取得
    }
    lastST = scrollTop;
    var hidePoint = 100;
    if (scrollTop > hidePoint) {
      $(".header").addClass('is-scroll');
    } else {
      $(".header").removeClass('is-scroll');
    }
  }
  $(window).on("scroll", hideGlobalNav); //スクロール時に関数を実行
}
</script>
<style lang="scss" scoped>
.hide {
  transform: translate3d(0px, -100%, 0px) !important
}
</style>