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
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server