Shrink Header on scroll
Hi guys, I'm new to this server. I"d be glad if you help me create this animation. I've been struggling to do it for long but couldn't succeed.
I Tried doing it with this code.
.hero-shrink {
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
.hero-shrink-active {
height: 50%;
/* add any other styles you want for the shrunken hero section */
}
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
document.getElementById("hero").classList.add("hero-shrink-active");
} else {
document.getElementById("hero").classList.remove("hero-shrink-active");
}
}
0 Replies