上スクロールの時のみヘッダーを表示する方法

Question

Nuxt.jsで上スクロールした時のみ'sticky-menu'というIDのついたヘッダーが現れるようにしたいです。
そこでmountedに以下のようなコードを書いたのですが、何も変わりません。

原因がわかる方がおられましたらご教授頂けると幸いです。

mounted() {
    document.addEventListener('DOMContentLoaded', function() {
      let startPos = 0
      const element = document.getElementById('sticky-menu')

      window.addEventListener('scroll', function(e) {
        const scrollTop =
          window.pageYOffset || document.documentElement.scrollTop
        const currentPos = scrollTop

        if (currentPos > startPos) {
          // down
          element.style.display = 'none'
        } else {
          // up
          element.style.display = 'block'
        }
        startPos = currentPos
      })
    })
}

Answer 1

ロジック自体に問題はないようです。
mountedタイミング時にDOMContentLoadedは既に完了しているため動いていないように見えます。
なのでそこを外せば動作すると思いますが、DOMのCSSを直接操作するよりは挙動をvueに寄せてクラスで表示管理するほうが個人的にはベターかなと思います。

<template>
  <header :class="{ 'is-hidden': headerHiddenFlag }">
  </header>
</template>

<script>
export default {
  data() {
    return {
      headerHiddenFlag: false
    }
  },
  mounted() {
    let startPos = 0
    window.addEventListener('scroll', () => {
      const currentPos = window.pageYOffset || document.documentElement.scrollTop
      this.headerHiddenFlag = currentPos > startPos
      startPos = currentPos
    })
  }
}
</script>

<style>
.is-hidden {
  display: none;
}
</style>

Comments

[Khy]

ご回答ありがとうございます！
vueに寄せて書く方法など大変参考になり、お影様で無事解決いたしました。
ありがとうございました！！