Vue - 滚动事件侦听器无法正常工作

Question

我的Vue组件中有一个标题，我正在尝试制作＃34;粘贴＆＃34;：

<app-header id="header"></app-header>

#header {
    position: relative;
    width: 100vw;
    top: 0px;
}

所以，那么我试图设置固定在滚动到标题的位置，如下所示：

methods: {
  handleScroll () {
    const header = document.querySelector('#header');
    const content = document.querySelector('#content');
    const rect = header.getBoundingClientRect();
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const headerTop = rect.top + scrollTop;

    if (window.scrollY > headerTop) {
      header.classList.add('fixed');
      content.classList.add('content-margin');
    } else {
      header.classList.remove('fixed');
      content.classList.remove('content-margin');
    }
  }
},
beforeMount () {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy () {
  window.removeEventListener('scroll', this.handleScroll);
}

我正在添加header课程fixed：

.fixed {
  position: fixed!important;
}

但是，当我滚动时，这些类会被删除并添加到header和content，只有当我停止滚动时才会使用正确的类。我怎么能阻止这种行为？

以下是在Vue中制作的基本fiddle，它应该是什么样的。