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

我有一个项目，我尝试在窗口中从右向左悬停一个元素，同时滚动。因此，当用户向下滚动时，元素从右向左移动，当用户向上滚动时，元素从左向右移动

我试图通过在窗口中添加滚动事件侦听器来实现这一点，然后检查此组件在浏览器上是否可见（此组件是应用程序中显示在彼此下方的多个组件之一）

如果有人知道更好的方法来实现这一点，请随时发表评论。我只是想用绝对定位在屏幕上移动物体

这是我目前正在使用的代码，但它不想工作。该对象不移动并保持不变

  data () {
    return {
      position: 0
    }
  },
  created () {
    window.addEventListener('scroll', (event) => {
      this.runOnScroll()
    })
  },
  mounted () {
    const navbar = this.$refs.neonComponent
    this.navbarOffset = navbar.offsetTop
  },
  methods: {
    runOnScroll () {
      if ((this.navbarOffset - 600) < window.pageYOffset) {
        this.position = Math.round((window.pageYOffset - (this.navbarOffset - 600)) / 10)
        this.$refs.neonText.style.right = this.position
      } else {
        if (this.position > 0) this.position = 0
      }
    //   console.log(this.position)
    }
  }

数据（）{
返回{
职位：0
}
},
创建（）{
window.addEventListener（'滚动'，（事件）=>{
这个
})
},
挂载（）{
常量导航栏=此。$refs.neonComponent
this.navbarOffset=navbar.offsetTop
},
方法：{
滚动（）{
如果（（this.navbarOffset-600）0）this.position=0
}
//console.log（这个位置）
}
}

这是一个示例文本

尝试在样式中添加一个单位（px，%，vh，vw）。右侧，如下所示：

this.$refs.neonText.style.right=this.position+'px'；

<div ref="neonComponent" class="relative w-full min-h-screen bg-black flex justify-center items-center">
    <div ref="neonText" class="absolute max-w-3xl text-center position-text">
       <h2 class="text-7xl">This is an example text</h2>
    </div>
</div>