title: Pure js add and remove (toggle) class after scrolling x amount?
body: <p>I don't want to use jQuery for this. </p>
  
  <p>It's really simple, I just want to add a class after scrolling past a certain amount of pixels (lets say 10px) and remove it if we ever go back to the top 10 pixels. </p>
  
  <p>My best attempt was:</p>
  
  <pre><code>var scrollpos = window.pageYOffset;
  var header = document.getElementById("header");
  
  function add_class_on_scroll() {
      header.classList.add("fade-in");
  }
  
  function remove_class_on_scroll() {
      header.classList.remove("fade-in");
  }
  
  window.addEventListener('scroll', function(){
      if(scrollpos &gt; 10){
          add_class_on_scroll();
      }
      else {
          remove_class_on_scroll();
      }
      console.log(scrollpos);
  });
  </code></pre>
  
  <p>But console shows a number that continues to grow regardless of scrolling up or down. And the class <code>fade-in</code> never gets added, though console shows we past 10.</p>