Menu
var headerInitOpacity = '0.3';
var headerStickyOpacity = '0.9';
var headerInitHeight = '80px';
var headerStickyHeight = '70px';
var headerHidingPoint = 40; // Scrolling point that triggers hiding the header (px)
var prevScrollpos = window.pageYOffset;
function handleScroll() {
var currentScrollPos = window.pageYOffset;
var navbar = document.getElementById("navbar");
// Determine the desired state of the navbar based on the current scroll position
var desiredState = getDesiredNavbarState(currentScrollPos, navbar.style.top);
if (desiredState.needsUpdate) {
// Temporarily remove the event listener to prevent multiple triggers
window.removeEventListener('scroll', handleScroll);
// Apply the desired navbar state
navbar.style.top = desiredState.top;
navbar.style.background = desiredState.background;
navbar.style.minHeight = desiredState.minHeight;
console.log(desiredState.logMessage); // Logging the action taken
// Re-add the event listener after a delay
setTimeout(function() {
window.addEventListener('scroll', handleScroll);
}, 50); // 100ms delay
}
prevScrollpos = currentScrollPos;
}
function getDesiredNavbarState(currentScrollPos, currentTop) {
if (prevScrollpos > currentScrollPos && currentScrollPos > headerHidingPoint) {
if (currentTop != "0px") {
return { needsUpdate: true, top: "0", background: "rgba(255, 255, 255, " + headerStickyOpacity + ")", minHeight: headerStickyHeight, logMessage: 'Sticking header' };
}
} else if (currentScrollPos <= headerHidingPoint) {
if (currentTop == "0px") {
return { needsUpdate: true, top: "0", background: "rgba(255, 255, 255, " + headerInitOpacity + ")", minHeight: headerInitHeight, logMessage: 'Top header' };
}
} else if (currentTop != "-100px") {
return { needsUpdate: true, top: "-100px", background: "", minHeight: "", logMessage: 'Hiding header' };
}
return { needsUpdate: false }; // No update needed
}
// Initially attach the scroll event listener
window.addEventListener('scroll', handleScroll);
