title: Trouble with scroll event
body: <p>I wanted to make a script that makes <code>div</code> with id <code>header</code> thinner while scrolling, and thicker when you go back to the top of the page. But I got a problem: when I scroll down, <code>header</code> becomes thinner, but when I go back to the top of the page, it doesn't become thicker, and also if you reload web-page being somewhere in the middle and then you go to the top, <code>header</code> becomes thicker only once.</p>
  
  <p>What did I do wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var head = document.getElementById('header');
  var height = 100;
  var sourceCoord = head.getBoundingClientRect().top + window.pageYOffset;
  var id;
  
  document.addEventListener("scroll", function() {
    if (window.pageYOffset &gt; sourceCoord) {
      id = setInterval(function() {
        if (height == 50) clearInterval(id);
        else {
          height--;
          head.style.height = height + "px";
        }
      }, 10);
      head.style.position = 'fixed';
    } else if (window.pageYOffset &lt;= sourceCoord) {
      id = setInterval(function() {
        if (height == 100) clearInterval(id);
        else {
          height++;
          head.style.height = height + "px";
        }
      }, 10);
      head.style.position = "absolute";
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>