Проблема с событием прокрутки

Question

Я хотел сделать скрипт, который делает div с идентификатором header тоньше при прокрутке и толще при возврате к верхней части страницы. Но у меня возникла проблема: когда я прокручиваю вниз, header становится тоньше, но когда я возвращаюсь к верхней части страницы, она не становится толще, а также, если вы перезагружаете веб-страницу где-то посередине и затем вы идете на вершину, header становится толще только один раз.

Что я сделал не так?

var head = document.getElementById('header');
var height = 100;
var sourceCoord = head.getBoundingClientRect().top + window.pageYOffset;
var id;

document.addEventListener("scroll", function() {
  if (window.pageYOffset > 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 <= sourceCoord) {
    id = setInterval(function() {
      if (height == 100) clearInterval(id);
      else {
        height++;
        head.style.height = height + "px";
      }
    }, 10);
    head.style.position = "absolute";
  }
});

<div id="header"></div>

Answer 1

Проблема в том, что вы вычисляете sourceCoord при загрузке страницы, в то время как оно фактически изменяется при прокрутке. Включите его в прослушиватель прокрутки, и все будет хорошо.