var vueModel = new Vue({
  el: '#app',
  data() {
    return {
      scrollY: 0,
      sectionOffsetTop: []
    }
  },
  computed: {
    currentNavi() {
      if(this.scrollY >= this.sectionOffsetTop[0] && this.scrollY < this.sectionOffsetTop[1]) {
        return 'コンテンツ1'
      } else if(this.scrollY >= this.sectionOffsetTop[1] && this.scrollY < this.sectionOffsetTop[2]) {
        return 'コンテンツ2'
      } else if(this.scrollY >= this.sectionOffsetTop[2] && this.scrollY < this.sectionOffsetTop[3]) {
        return 'コンテンツ3'
      } else if(this.scrollY >= this.sectionOffsetTop[3] && this.scrollY < this.sectionOffsetTop[4]) {
        return 'コンテンツ4'
      } else if(this.scrollY >= this.sectionOffsetTop[4]) {
        return 'コンテンツ5'
      } else {
        return 'スクロールすると現在のコンテンツ名が表示されます'
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', () => {
      this.pushScrollY();
    });
    window.addEventListener('resize', () => {
      this.pushScrollY();
    });
    this.pushElementOffsetTop();
  },
  methods: {
    pushScrollY() {
      this.scrollY = window.scrollY;
    },
    pushElementOffsetTop() {
      const targets = [
        'section_01',
        'section_02',
        'section_03',
        'section_04',
        'section_05'
      ];
      targets.forEach(target => {
        const element = document.getElementById(target)
        const offsetTop = Math.round(window.scrollY + element.getBoundingClientRect().top);
        this.sectionOffsetTop.push(offsetTop);
      });
    }
  }
});