54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
|
document$.subscribe(function () {
|
||
|
|
const hero = document.querySelector(".hero-banner");
|
||
|
|
const header = document.querySelector(".md-header");
|
||
|
|
const sidebarLeft = document.querySelector(".md-sidebar--primary");
|
||
|
|
const sidebarRight = document.querySelector(".md-sidebar--secondary");
|
||
|
|
|
||
|
|
if (!hero || !header) return;
|
||
|
|
|
||
|
|
// Reveal hero banner
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
hero.style.opacity = 1;
|
||
|
|
});
|
||
|
|
|
||
|
|
// Scroll logic
|
||
|
|
function updateUI() {
|
||
|
|
const heroBottom = hero.getBoundingClientRect().bottom;
|
||
|
|
|
||
|
|
const hasScrolledPastHero = heroBottom <= 0;
|
||
|
|
|
||
|
|
// Update header
|
||
|
|
if (hasScrolledPastHero) {
|
||
|
|
header.classList.add("scrolled");
|
||
|
|
} else {
|
||
|
|
header.classList.remove("scrolled");
|
||
|
|
}
|
||
|
|
|
||
|
|
// Handle sidebar visibility (only on wide screens)
|
||
|
|
if (window.matchMedia("(min-width: 76.25em)").matches) {
|
||
|
|
const show = hasScrolledPastHero;
|
||
|
|
|
||
|
|
[sidebarLeft, sidebarRight].forEach((sidebar) => {
|
||
|
|
if (!sidebar) return;
|
||
|
|
|
||
|
|
if (show) {
|
||
|
|
sidebar.style.display = "block";
|
||
|
|
requestAnimationFrame(() => {
|
||
|
|
sidebar.style.opacity = "1";
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
sidebar.style.opacity = "0";
|
||
|
|
setTimeout(() => {
|
||
|
|
sidebar.style.display = "none";
|
||
|
|
}, 300);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Initial and on scroll
|
||
|
|
window.addEventListener("scroll", updateUI);
|
||
|
|
updateUI(); // Initial run
|
||
|
|
});
|
||
|
|
|