Javascript Vue.js样式在错误的元素上工作

真奇怪。 我正在Vue组件中制作浮动边栏，因此需要在fixed和relative之间更改css位置值。 所以我所做的是为边栏元素提供一个ID，在scroll事件中，检查页面上的位置并更改一些css值

这是我的密码

created() {
    document.addEventListener('scroll', this.handleScroll);
},
destroyed() {
    document.addEventListener('scroll', this.handleScroll);
}
/* ... */ 
handleScroll(e) {
  var doc = document.documentElement;
  var top = (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0);
  var originWidth = $("#fields-to-move").width() + 2;
  if(this.screen_no == 2){
    if (280 <= top) {
      document.getElementById("fields-to-move").style.position = "fixed";
      document.getElementById("fields-to-move").style.top = 10 + 'px' ;
      document.getElementById("fields-to-move").style.width = originWidth + 'px'; 
    } else {
      document.getElementById("fields-to-move").style.position = "relative"; 
      document.getElementById("fields-to-move").style.top = 'auto' ;
      document.getElementById("fields-to-move").style.width = originWidth + 'px'; 
     }
 }
}

created（）{
document.addEventListener（'scroll'，this.handleScroll）；
},
销毁（）{
document.addEventListener（'scroll'，this.handleScroll）；
}
/* ... */ 
handleScroll（东）{
var doc=document.documentElement；
var top=（window.pageYOffset | | doc.scrollTop）-（doc.clientTop | 0）；
var originWidth=$（“#要移动的字段”）.width（）+2；
如果（this.screen_no==2）{
如果（280如果您可以在JSFIDLE中提供单独的示例，那么将更容易提供帮助。。。
但我相信，这种行为可能是由下面描述的一些Vue优化引起的：

编辑：
尝试在vues nextTick中执行“handleScroll”的整个逻辑