Javascript 当元素/div在屏幕上不可见时更改css

在我的vue web应用程序中，当其中一个元素通过滚动离开屏幕时，我试图更改标题的CSS类

我正在使用查找元素是否可见，因为我找不到任何vue方法

现在，我有以下HTML代码来动态更改CSS类：

<div class="aClass" :class="{'bClass': isElemVisible()}">
   ....
   ....
</div>

---

问题在于，它不会动态更改isElemVisible返回的值，它只在加载时获取第一个值，即使在滚动和

#myDiv

退出屏幕后也不会更改，如何做到这一点，或者是否有更好的/vue方法来做到这一点。

我建议您听听滚动事件，如下所示：

问题是，

iselevisible（）

没有被执行。该方法已定义，在Vue第一次确定是否应启用

bClass

时执行，但随后，特别是在滚动时，将不再执行该方法

我建议使用一个boolean

data

属性，而不是一个只执行一次的简单方法，滚动jquery返回的值时更新该属性

我已经把它们放在一起演示了我的意思，但简而言之：

<div id="myDiv" class="aClass" :class="{'bClass': isElemVisible}">
</div>

---

是的，在scroll上通过该函数调用该函数，但这并没有动态添加该类。

<div id="myDiv" class="aClass" :class="{'bClass': isElemVisible}">
</div>

data() {
  return {
    isElemVisible: true
  }
},

created() {
  window.addEventListener('scroll', event => {
    this.isElemVisible = $('#myDiv').visible(true)
  })
}