# 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

関連記事

Nuxtjs build WARNING in entrypoint size limit
Nuxtjs axios リクエストのヘッダー設定
Nuxtjs titleTemplate の設定
Nuxt.js でフロントエンドのカテゴリ選択
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
楽天 GOLD に Nuxt で作った HP デプロイ公開した話
vuejs v-if と v-show の違い
web 開発でよく使うリダイレクトと nuxtjs redirect
vuejs で omisejapan の決済フォーム作成した時のメモ
localStorage is not defined に遭遇した時の対応
nuxtjs の wpa を実装した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
nuxtjs のページごと head の title description 変更
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
javascript reduce 連想配列の合計計算覚えよう
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
vue hook 使って vuejs コンポーネントライフサイクル監視
Nuxtjs に iview 4.0 入れた動かしてみた
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
javascript password generator ランダム文字列パスワード作成
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ