let lastScrollY = window.scrollY;
const header = document.getElementById("site-header");
window.addEventListener("scroll", () => {
const currentScrollY = window.scrollY;
if (!header) return;
if (currentScrollY > lastScrollY && currentScrollY > 100) {
// Scroll hacia abajo
header.classList.add("header-hidden");
} else {
// Scroll hacia arriba
header.classList.remove("header-hidden");
}
lastScrollY = currentScrollY;
});
/* Estilo base */
#site-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
transition: transform 0.3s ease;
}
/* Oculto al hacer scroll hacia abajo */
#site-header.header-hidden {
transform: translateY(-100%);
}
YOU MAY ALSO LIKE...
Configure your browsing
Functional
Always active
Technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Preferences
Technical storage or access is necessary for the legitimate purpose of storing preferences not requested by the subscriber or user.
Statistics
Storage or technical access used exclusively for statistical purposes.
Storage or technical access used exclusively for anonymous statistical purposes. Without a request, voluntary compliance by your Internet service provider, or additional records from a third party, information stored or retrieved solely for this purpose cannot be used to identify you.
Marketing
Technical storage or access is necessary to create user profiles for sending advertising, or to track the user on a website or across several websites for similar marketing purposes.