Vue.jsでフォーカス機能つきのスクロールスパイを実装する

<template>
  <nav>
    <ul id="scroll-bar"
        class="scroll-nav">
      <li v-for="(navItem, index) in navItems"
          :key="index"
          :index-id="index">
        <a href="#"
           :id="`spy-${navItem.name}`">
          {{ navItem.name }}
        </a>
      </li>
    </ul>
  </nav>
</template>

<script>
import _ from 'lodash';

export default {
  data() {
    navItems: [
      { id: 0, name: 'vue' },
      { id: 1, name: 'react' },
      { id: 2, name: 'angular' },
      { id: 3, name: 'typescript' },
      { id: 4, name: 'javascript' },
    ],
    currentIndex: 0,
    positions: [],
  },

  mounted() {
    // 1. スクロールイベントにscrollSpyイベントを紐づける
    window.addEventListener('scroll', _.throttle(this.scrollSpy, 50));
    this.calculatePosition();
  },

  destroyed() {
    window.removeEventListener('scroll', this.scrollSpy);
  },

  methods: {
    // 3. スクロールが行われるたびに、現在位置が各セクションの中かどうかを判定する。
    scrollSpy() {
      const els = document.getElementsByClassName('scroll-spy');
      els.forEach(el => {
        const elTop = el.getBoundingClientRect().top;
        const elBottom = el.getBoundingClientRect().bottom;

        // セクションの持つheightより外の場合
        if (elTop > 0 || elBottom < 0) {
          const navItem = this.$el.querySelector(`#spy-${el.id}`);
          navItem.classList.remove('active');
        }

        // セクションの持つheightより中の場合
        if (elTop <= 0 && elBottom >= 0) {
          const navItem = this.$el.querySelector(`#spy-${el.id}`);
          navItem.classList.add('active');

          this.currentIndex = navItem.parentNode.getAttribute('index-id');
        }
      });
    },

    // 2. それぞれのnavItemの画面左端からの距離を取得し、positionsに格納しておく
    calculatePosition() {
      const els = this.$el.querySelector('data-id');
      els.forEach(el => {
        const position = el.getBoundingClientRect().left;
        this.positions.push(position);
      });
    },
  },

  watch: {
    // 4. currentIndexが更新されるたびに、navを移動させる（actionクラスが付与されているnavItemを左端に移動させる）
    currentIndex(newIndex) {
      const scrollBar = this.$el.querySelector('#scroll-bar');
      scrollBar.scrollLeft = this.positions[newIndex];
    },
  },
}
</script>

<style scoped>
.scroll-bar {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  list-style-type: none;
  overflow-x: scroll;
}

.active {
  color: #f08000;
}
</style>

<template>
  <div>
    <fixed-header class="sticky" />

    <div id="vue" class="scroll-spy">
      <h2>Vue</h2>
      .
      .
      .   
    </div>

    <div id="react" class="scroll-spy">
      <h2>React</h2>
        .
        .
        .   
    </div>

    <div id="typescript" class="scroll-spy">
      <h2>Typescript</h2>
        .
        .
        .   
    </div>
  </div>
</template>

<script>
import FixedHeader from 'components/FixedHeader.vue'

export default {
  components: {
    FixedHeader
  },
}
</script>

<style scoped>
.sticky {
  position: sticky;
}
</style>