Vue项目实现滑块滚动，导航栏固定在顶部

1、HTML部分

<div class="anchor-point-box">
    <a class="item" :class="{ active: anchor === 1 }" href="#function-introduce" @click="anchor = 1"> 基本信息 </a>
    <a class="item" :class="{ active: anchor === 2 }" href="#contact-information" @click="anchor = 2"> 联系信息 </a>
    <a class="item" :class="{ active: anchor === 3 }" href="#application-scenarios" @click="anchor = 3"> 其他信息 </a>
    <a class="item" :class="{ active: anchor === 4 }" href="#Interface-information" @click="anchor = 4"> 接口信息 </a>
</div>

2、script部分

思路是：将 anchor-point-box 元素的 scrollTop 作为 data 里面的一个属性 然后 watch 来监听数据的变化

export default {
  layout: 'home',
  data() {
    return {
      scroll: 0,
    }
  },
  watch: {
    scroll: {
      handler: 'showTop'
    }
  },
  mounted() {
    window.addEventListener('scroll', this.getScroll)
  },
  methods: {
    showTop(newValue, oldValue) {
      const header = document.getElementsByClassName('anchor-point-box')[0]
      if (newValue > 340) {
        header.classList.add('header-active')
      } else {
        header.classList.remove('header-active')
      }
      // console.log(oldValue, newValue)
    },
    getScroll() {
      this.scroll =
         document.documentElement.scrollTop || document.body.scrollTop
    }
  }
}

3、最终效果

（1）初始效果：

（2）滚动滚动条后效果：