Vue CSS如何在滚动时在屏幕上移动对象

.moving-object {
  transform: translateY(50px);
}

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    handleScroll() {
      const movingObject = document.querySelector(".moving-object");
      const scrollPosition = window.scrollY;

      // 根据滚动位置判断是否需要添加或删除类名
      if (scrollPosition > 200) {
        movingObject.classList.add("moving-object");
      } else {
        movingObject.classList.remove("moving-object");
      }
    },
  },
};
</script>

<style>
.moving-object {
  transform: translateY(50px);
}
</style>