Hapicode

# 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 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

Nuxtjs build WARNING in entrypoint size limit

Nuxtjs build で entrypoint size limit warning エラー発生...

Nuxtjs axios リクエストのヘッダー設定

Nuxtjs axios 通信毎に onRequest に header 設定したい...

Nuxtjs titleTemplate の設定

Nuxtjsのheadにtitleのtemplate使って設定する方法...

Nuxt.js でフロントエンドのカテゴリ選択

バックエンドLaravelとフロントエンドNuxtjsでカテゴリーの一覧表示と選択したら子カテゴリー...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

楽天 GOLD に Nuxt で作った HP デプロイ公開した話

楽天GOLDにNuxtjs製HPデプロイ公開!楽天GOLDのFTP操作とNuxtjsで作成したページ...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説 よく使われる v-if と v-show の...

web 開発でよく使うリダイレクトと nuxtjs redirect

リダイレクトコード、恒久リダイレクト一時的リダイレクトのいろいろをまとめました。...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

localStorage is not defined に遭遇した時の対応

nuxtjsのssrモードでlocalStorage is not definedエラーに遭遇！...

nuxtjs の wpa を実装した時のメモ

3分でできるnuxtjs使ってwpa設定 @nuxtjs/wpaモジュール入れて設定追加して画像一枚...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

nuxtjs のページごと head の title description 変更

nuxtjsのhead内titleとdescription動的変更してSEOパワーアップしていこう！...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

javascript reduce 連想配列の合計計算覚えよう

javascript 配列 sum 合計計算、reduce 使ってやってみて覚える連想配列の落とし穴...

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

Nuxtjs に iview 4.0 入れた動かしてみた

日本には普及していない iview がバージョン 4.0 リリースしました。UI フレームワークを ...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
polyfill という宝物で開発時の ie11 対応した時のメモ