#vuejs スクロールでナビバー表示非表示

nuxtjs でシステム開発していますが、スクロールによってナビメニューの表示非表示をやる時のメモです。

やりたいこと

スクロールイベントを監視して
上にスクロールしたら、ナビバー表示
下にスクロールすると、ナビバー非表示

<template>
  <div>
    <transition
      name="headerNav"
      enter-active-class="animated fadeInDown faster"
    >
      <Header v-show="isShow" />
    </transition>
    <nuxt />
    <Footer />
  </div>
</template>
<script>
import Header from '@/components/Header'
import Footer from '@/components/Footer'
export default {
  components: {
    Header,
    Footer
  },
  data () {
    return {
      scrollY: 0,
      isShow: true
    }
  },
  mounted () {
    // スクロールイベントを取得
    window.addEventListener('scroll', this.onScroll)
    window.addEventListener('load', () => {
      this.onScroll()
    })
  },
  watch: {
    // 上にスクロールした時に表示
    scrollY (newValue, oldValue) {
      this.$set(this, 'isShow', newValue < oldValue)
    }
  },
  methods: {
    // スクロール値の取得
    onScroll () {
      this.$set(this, 'scrollY', window.pageYOffset)
    }
  }
}
</script>
2020-04-06
  • vuejs
  • nuxtjs

関連記事

polyfill という宝物で開発時の ie11 対応した時のメモ
Nuxtjs に iview 4.0 入れた動かしてみた
nuxtjs のページごと head の title description 変更
web 開発でよく使うリダイレクトと nuxtjs redirect
nuxtjs の wpa を実装した時のメモ
localStorage is not defined に遭遇した時の対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs i18n の html-lang と font 設定
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
nuxt cordova web ハイブリッドアプリ作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
laravel vuejs 初期設定