Skip to content

Instantly share code, notes, and snippets.

@ef2k
Last active June 23, 2018 18:31
Show Gist options
  • Save ef2k/7a43bf6b635f6de3c33ee02ca762d1dc to your computer and use it in GitHub Desktop.
Save ef2k/7a43bf6b635f6de3c33ee02ca762d1dc to your computer and use it in GitHub Desktop.
A minimal implementation of a fixed header on scroll with a translucent bg.
<template>
<header>
<h1>Brand</h1>
</header>
</template>
<script>
;(() => {
const header = document.querySelector('header');
const stick = header.offsetTop;
window.onscroll = () => {
if (window.pageYOffset > stick) {
console.log('add')
header.classList.add('fix');
} else {
console.log('rm')
header.classList.remove('fix');
}
};
})();
</script>
<style>
header {
background: transparent;
transition: background 0.8s;
}
.fix {
background: rgba(255, 255, 255, 0.8);
position: fixed;
width: 100%;
top: 0;
left: 0;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment