# 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>