Question

在我的vue网络应用程序中，当一个元素通过滚动离开屏幕时，我正在尝试更改标题的CSS类。

我正在使用jquery-visible来查找元素是否可见，因为我找不到任何vue方式。

现在我在HTML中使用以下代码来动态更改CSS类：

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

在我的Vue代码中，我添加了一个方法如下：

export default {
  name: 'myElem',
  methods: {
    isElemVisible () {
      console.log($('#myDiv').visible(true))
      return $('#myDiv').visible(true)
    }
  }
}

这个问题是它不会动态更改isElemVisible返回的值，它只是在加载时取第一个值，即使在滚动后#myDiv离开屏幕也不会改变，怎么能这样做或者如果有更好/更好的方式来做它。

Answer 1

我建议您听一下滚动事件，如下所示：https://github.com/vuejs/Discussion/issues/324

Answer 2

问题是isElemVisible()没有被执行。该方法已经定义，并且在第一次Vue确定是否应该启用bClass时执行，但随后，特别是在滚动时，它永远不会再次执行。

我建议使用一个布尔data属性代替仅执行一次的简单方法，在使用jquery-visible返回的值滚动时更新。

我已经将this CodePen放在一起来证明我的意思，但简而言之：

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

而不是方法使用data属性和滚动事件侦听器：

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

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

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

2 个答案: