Nuxt(Vue)で、ある位置までスクロールしたらclassを付与、そしてヘッダー追従

ある位置までスクロールしたらclassを付与したい

よくある「ある位置までスクロールしたらヘッダー追従」で、classを付与してcssのposition:fixedでスタイル調整する方法です。

<template>には以下内容を記載

template

<header id="header" :class="{ '-fixed': scrollY > 900 }">
  <logo />
  <nav>
    <ul class="list">
      <li><n-link to="/">メニュー</n-link></li>
      <li><n-link to="/">メニュー</n-link></li>
      <li><n-link to="/">メニュー</n-link></li>
      <li><n-link to="/">メニュー</n-link></li>
    </ul>
  </nav>
  <button class="nav-btn">
    <span class="nav-ico"></span>
  </button>
</header>

<script>には以下内容を挿入
※必要な部分のみ記載してます

script

export default {
  data() {
    return {
      // 座標を指定
      scrollY: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.scrollY = window.scrollY
    }
  }
}

template

<header id="header" :class="{ '-fixed': scrollY > 900 }">

:class="{ '-fixed': scrollY > 900 }で、

スクロール値が900以上になったらclass'-fixed'を付与してね

って指示してます。

あとは、付与されたclassに対してスタイル調整するだけです。
個人的にはわかりやすいのでcssでやってしまってます。

もっと上手な書き方あったら教えてください😃

参考にさせていただいた記事

【Vue.js】スクロールでDOM操作する（消えるタイトル編）

スペシャルサンクス

当社の社長