I have been trying to implement a transition effect for when the header goes hidden, but it seems to disappear immediately. I've included the code below for reference:
function getScrollTop() {
return window.pageYOffset || document.documentElement.scrollTop;
}
function showHeaderHidden() {
document.getElementById('header').classList.add('hidden');
document.getElementById('header').classList.remove('fixed');
}
function showHeaderFixed() {
document.getElementById('header').classList.add('fixed');
document.getElementById('header').classList.remove('hidden');
}
function showHeaderFull() {
document.getElementById('header').classList.remove('fixed');
document.getElementById('header').classList.remove('hidden');
}
var lastScrollTop = 0;
function atPageTop(scroll) {
return scroll < 1;
}
function scrollingDown(scroll) {
return scroll > lastScrollTop
}
function onWindowScroll() {
var scrollTop = getScrollTop();
if (scrollingDown(scrollTop)) {
if (scrollTop > 300) {
showHeaderHidden();
} else {
showHeaderFixed();
}
} else {
if (atPageTop(scrollTop)) {
showHeaderFull();
} else {
showHeaderFixed();
}
}
lastScrollTop = scrollTop;
}
lastScrollTop = getScrollTop();
window.onscroll = function () {
onWindowScroll();
};body {
height: 2000px;
margin: 0px;
}
header {
height: 120px;
background: red;
transition: .5s;
}
header.fixed {
position: fixed;
z-index: 10;
top: 0;
left: 0;
width: 100%;
height: 45px;
background: green;
transition: .5s;
}
header.hidden {
height: 0px;
}<header id="header">
</header>I've specified a transition for the hidden header as well, but it doesn't seem to be working as expected:
header.hidden {
height: 0px;
transition: .5s;
}
If anyone has any insights or solutions, I would greatly appreciate your help!
Thank you in advance:)