Почему плавная прокрутка не работает?(ДС)

Question

У меня есть этот код (из учебника, спасибо Sysleaf) для заголовка, появляющегося и исчезающего при прокрутке.Это должно быть гладко, но, к сожалению, это не так.Я включил его в браузере.Кроме того, все работает в демоверсии учебника.

CSS:

  header {
  background-color: rgb(46, 49, 94);
  border-color: rgb(17, 27, 39);
  position: fixed;
  height:120px; 
  width: 100%;
  z-index: 1;
  top: 0;
      }

.header-pin {
  transform: translateY(0);
}

.header-unpin {
  transform: translateY(-65px); 
}

и JS:

let currentScrollY = 0;
let lastKnownScrollY = 0;
let ticking = false;
let idOfHeader = 'header';
let eleHeader = null;
const classes = {
  pinned: 'header-pin',
  unpinned: 'header-unpin',
};

function onScroll() {
  currentScrollY = window.pageYOffset;
  requestTick();
}  

function requestTick() {
  if (!ticking) {
    requestAnimationFrame(update);
  }
  ticking = true;
}

function update() {
  if (currentScrollY < lastKnownScrollY) {
    pin();
  } else if (currentScrollY > lastKnownScrollY) {
    unpin();
  }
  lastKnownScrollY = currentScrollY;
  ticking = false;
};

function pin() {
  if (eleHeader.classList.contains(classes.unpinned)) {
    eleHeader.classList.remove(classes.unpinned);
    eleHeader.classList.add(classes.pinned);
  }
}

function unpin() {
  if (eleHeader.classList.contains(classes.pinned) || !eleHeader.classList.contains(classes.unpinned)) {
    eleHeader.classList.remove(classes.pinned);
    eleHeader.classList.add(classes.unpinned);
  }
}

window.onload = function() {
  eleHeader = document.getElementById(idOfHeader);
  document.addEventListener('scroll', onScroll, false)
}

Пожалуйста, не могли бы вы мне сказать, что не так?