纯javascript的粘性头，DOM有问题

我在创建粘性标题的函数中遇到问题

代码如下：

function stick() {
var stickyNavTop = headerNav.offset().top;
var scrollTop = window.scrollTop();
while (stickyNavTop> scrollTop) {
    headerNav.className +=("sticky");
}
else {
    headerNav.className -= ("sticky")
}
}

CSS有一个简单的.sticky{position:fixed}

我相信问题出在DOM中，但我不知道如何解决它。虽然我知道jQuery可以以一种更简单的方式完成这项工作，但这项工作的目的是学习JavaScript，因此我正在寻找纯JS而不是jQuery的答案。还有任何其他问题，我可能有，请突出他们，因为他们将非常感谢

---

提前谢谢。

我刚刚进行了一个新的函数调用

   var headerNav = document.getElementById("navbar");
     window.onscroll = function() {
     console.log('scrolled');
  var scrollTop = window.pageYOffset;

  document.getElementById("navbar").style.top =scrollTop+"px";
  }

这个

---

您还可以设置样式。position=“absolute”；在javascript函数中。

请在其中添加一个JSFIDLE。我必须说这是一个非常糟糕的FIDLE。另外，我最近也开始学习JavaScript。我把这个问题贴在网上，希望有人能帮我解决问题。请不要只是说我的小提琴不好，而不给我一个更好的选择。是的，巴迪会给你一个解决方案。同时也试着接受别人的批评。这也将帮助你更好地提高

const header  = document.getElementById('**HEADER ID**');

addClassHeader = () => {
    header.classList.add("sticky");
}

removeClassHeader = () => {
    header.classList.remove("sticky");
}

window.addEventListener('scroll', function () {
    let getScrollposition = window.scrollY;
    if (getScrollposition > 0) {
        addClassHeader();
    } else {
        removeClassHeader();
    }
});