23-01-14

随页面滚动改变class值

<template>

  <header id="ha-header" :class="['ha-header',classObject]">
  </header>

</template>

<script>
export default {
 // props: {},
  data() {
  return {
    classObject:'larger'
  }
},

  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', this.onScroll, false)
  },
  destroy() {
    // 必须移除监听器，不然当该vue组件被销毁了，监听器还在就会出错
    window.removeEventListener('scroll', this.onScroll)
  },

  methods: {
    // 滚动监听器
    onScroll() {
      // 获取所有锚点元素
      const navsection = document.querySelectorAll('section')
      // 所有锚点元素的 offsetTop
      const offsetTopArr = []
      navsection.forEach(item => {
      offsetTopArr.push(item.offsetTop)
      })

      // 获取当前文档流的 scrollTop
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

      // 定义当前点亮的导航下标
      if (scrollTop < 702)
      {
        this.classObject  ='larger'
      }
      if (scrollTop > 703)
      {
        this.classObject  ='small'
      }
    },
  }
}
</script>