Question

真的很奇怪。我在Vue组件中制作浮动侧边栏，因此需要在固定和相对之间更改css位置值。所以我做的是为侧边栏元素提供ID，在滚动事件上，检查页面上的位置并更改一些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'; 
     }
 }
}

＆＃34;字段到移动＆＃34;是我要改变css的DOM元素的ID。它运作良好。

但问题是上面的css（位置：固定，顶部：10px和宽度）也适用于没有ID的其他元素。

还有一件事需要提及。具有ID的元素是另一个使用v-if条件安装的子元素。在卸下父元素之后，css将应用于之后安装的错误元素。

我不确定我的解释是否足够。如果您对我的问题有任何疑问，请告诉我。

提前致谢。

Answer 1

如果您可以在jsfiddle中提供separeted示例，那么帮助更容易... 但我相信这种行为可能是由这里描述的一些Vue优化引起的：documentation

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

Vue.js风格正在处理错误的元素

1 个答案: