georges/layouts/partials/site-header.html
2022-02-02 15:59:34 +01:00

38 lines
1,001 B
HTML

<header id="head">
<div class="sitetitle">
<a href="/">{{ .Site.Title }}</a>
</div>
</header>
<div id="headbg"></div>
<script>
const GEORGES_POS = 0.2;
let isHeaderMenu = false;
let ticking = false;
function setHeaderbar(scrollPos) {
if(!isHeaderMenu && scrollPos > GEORGES_POS * window.innerHeight) {
header_elt = document.getElementsByTagName('header')[0];
header_elt.classList.add('headerbar');
isHeaderMenu = true;
} else if(isHeaderMenu && scrollPos < GEORGES_POS * window.innerHeight) {
document.getElementsByTagName('header')[0].classList.remove('headerbar');
isHeaderMenu = false;
}
}
setHeaderbar(window.scrollY);
document.addEventListener('scroll', function(e) {
if (!ticking) {
window.requestAnimationFrame(function() {
setHeaderbar(window.scrollY);
ticking = false;
});
ticking = true;
}
});
</script>