window.onscroll = () => scrollFunction();

let scrollFunction = () => {

if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("headerbar").classList.replace("headerbar-full", "headerbar-compact");
    document.getElementById("content").classList.replace("content-full", "content-compact");
    document.getElementById("info-level").style.display = "none";
    document.getElementById("headerbar-logo").style.display = "block";
} else {
    document.getElementById("headerbar").classList.replace("headerbar-compact", "headerbar-full");
    document.getElementById("content").classList.replace("content-compact", "content-full");
    document.getElementById("info-level").style.display = "flex";
    document.getElementById("headerbar-logo").style.display = "none";
}

}