title: Vue - scroll event listener not working properly
body: <p>I have a header in my Vue component, that I am trying to make "sticky":</p>
  
  <pre><code>&lt;app-header id="header"&gt;&lt;/app-header&gt;
  
  #header {
      position: relative;
      width: 100vw;
      top: 0px;
  }
  </code></pre>
  
  <p>So, then I have tried to set the position fixed on scrolling to the header like this:</p>
  
  <pre><code>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 &gt; 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);
  }
  </code></pre>
  
  <p>I am adding to the <code>header</code> the class <code>fixed</code>:</p>
  
  <pre><code>.fixed {
    position: fixed!important;
  }
  </code></pre>
  
  <p>But, when I scroll, the classes keep being removed and added to <code>header</code> and <code>content</code>, only when I stop scrolling the right classes are in place. How can I stop this behaviour?</p>
  
  <p>Here is the stripped down, basic <a href="https://jsfiddle.net/8q6rbzj7/36/" rel="nofollow noreferrer">fiddle</a> that is not made in Vue, of how it should like.</p>