<header>
Logo
</header>
<main>
<section><img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80" alt='colorfull passage' /></section>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus tincidunt lorem ac condimentum. In vel dictum ex. Nulla facilisi. Etiam ipsum felis.</p></section>
<section><img src='https://images.unsplash.com/photo-1459478309853-2c33a60058e7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80' alt='colored leafs' /></section>
<section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam maximus tincidunt lorem ac condimentum. In vel dictum ex. Nulla facilisi. Etiam ipsum felis.</p></section>
</main>
* {
margin: 0;
padding: 0;
font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
}
header {
position: absolute;
width: 100%;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.4);
&.can-animate {
transition: transform 0.3s ease, visibility 0s 0.3s linear;
}
&.is-fixed {
background: rgba(255, 255, 255, 0.9);
position: fixed;
transform: translate3d(0, -100%, 0);
}
&.scroll-up {
transform: translate3d(0, 0, 0);
}
}
section {
background: #efefef;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
img {
width: 100%;
max-height: 100%;
object-fit: cover;
}
p {
max-width: 40ch;
}
View Compiled
const header = document.querySelector("header");
let lastScroll = 0;
const throttle = (func, time = 100) => {
let lastTime = 0;
return () => {
const now = new Date();
if (now - lastTime >= time) {
func();
time = now;
}
};
};
const validateHeader = () => {
const windowY = window.scrollY;
const windowH = window.innerHeight;
if (windowY > windowH) {
// We passed the first section, set a toggable class
header.classList.add("is-fixed");
// Determine is we ready to animate
if (windowY > windowH + 40) {
header.classList.add("can-animate");
if (windowY < lastScroll) {
// Determine if we scrolling up
header.classList.add("scroll-up");
} else {
header.classList.remove("scroll-up");
}
} else {
header.classList.remove("scroll-up");
}
} else {
header.classList.remove("is-fixed", "can-animate");
}
lastScroll = windowY;
};
window.addEventListener("scroll", throttle(validateHeader, 100));
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.