html - VueJS:如何在滚动位置后动态更改CSS类

我正在使用vueJs和bootstrap创建一个webapp。我想在特定数量的滚动之后change CSS class一个元素，是否有一些可行的方法呢？

我想要以下内容:

<div :class="{classA: scrollPosition < 100, classB: scrollPosition > 100}">
</div>

我发现的一种选择是使用vue-scroll，这似乎很有希望，但使用not working。

还有其他一些本机的方法可以达到相同的效果吗？

最佳答案

您可以尝试使它像这样

const app = new Vue({

  el: '#app',

  data: {
    scrollPosition: null
  },

  methods: {
    updateScroll() {
      this.scrollPosition = window.scrollY
    }
  },

  mounted() {
    window.addEventListener('scroll', this.updateScroll);
  }

})

您还应该考虑在销毁组件时删除事件侦听器，以防止泄漏:

destroy() {
  window.removeEventListener('scroll', this.updateScroll)
}