Switch Sticky Header

Na této stránce jsem vytvořil možnost přepínání hlavičky tak, aby se buď posouvala společně s obsahem stránky, nebo byla vždy viditelná v horní části stránky.

<style>
header {
    position: relative;
    top: 0;
    width: 100%;
    height: 100px;
    z-index: 200;
}
.hfg_header.site-header {
    box-shadow: 0 15px 15px rgba(0, 0, 0, .1);
}
@media (max-width: 768px) {
    #header-clip {
        display: none;
        visibility: hidden;
    }
}
#header-clip {
    position: absolute;
    left: 50%;
    bottom: -13px;
    display: inline-block;
    padding: 1px 15px;
    background-color: white;
    border-radius: 0px 0px 10px 10px;
    transform: translateX(-50%);
    cursor: pointer;
    font-size: 12px;
    color: silver;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
    // Vytvoření prvku
    let headerClip = document.createElement("div");
    headerClip.id = "header-clip";
    //headerClip.classList.add("odepnuto");
    headerClip.innerText = "připnout záhlaví";
    //headerClip.setAttribute("title", "Připnutí / odepnutí záhlaví");

    // Najití prvku header a vložení nového prvku na jeho konec
    let header = document.querySelector("header");
    if (header) {
        header.appendChild(headerClip);
    }
    
    // Po kliknutí spustí funkci switchStickyHeader()
    if (headerClip) {
        headerClip.addEventListener("click", switchStickyHeader);
    }
    
    checkStickyHeader();
});

function checkStickyHeader() {
   var x = document.querySelector("header");
   var y = document.querySelector("body");
   var pripnuto = getCookie("cpripnuto");
   
   if (pripnuto != "") {
    	if (pripnuto == 'on') {
            x.style.position = "fixed";
            y.style.paddingTop = "100px";
            document.getElementById("header-clip").innerText = "odepnout záhlaví";
    	}
    	else {
            x.style.position = "relative";
            y.style.paddingTop = "0px";
            document.getElementById("header-clip").innerText = "připnout záhlaví";
    	} 
   }
}

function switchStickyHeader() {
   var x = document.querySelector("header");
   var y = document.querySelector("body");
   var sw = x.style.position;
   
   if (sw == "relative" || sw == "") {
        x.style.position = "fixed";
    	y.style.paddingTop = "100px";
	   //document.getElementById("header-clip").className = "pripnuto";
    	document.getElementById("header-clip").innerText = "odepnout záhlaví";
     	setCookie("cpripnuto","on",30);
  	}
   else {
     	x.style.position = "relative";
    	y.style.paddingTop = "0px";
    	//document.getElementById("header-clip").className = "odepnuto";
    	document.getElementById("header-clip").innerText = "připnout záhlaví";
     	setCookie("cpripnuto","off",30);
   }
}

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires + "; path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}
</script>