62 lines
1.6 KiB
JavaScript
62 lines
1.6 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");
|
|
|
|
// Add class to body if hero exists
|
|
if (hero) {
|
|
document.body.classList.add("has-hero");
|
|
} else {
|
|
// NO HERO - make header solid immediately
|
|
if (header) {
|
|
header.classList.add("scrolled");
|
|
}
|
|
}
|
|
|
|
if (!hero || !header) return;
|
|
|
|
// Reveal hero banner
|
|
requestAnimationFrame(() => {
|
|
hero.style.opacity = 1;
|
|
});
|
|
|
|
// Scroll logic - ONLY runs if hero exists
|
|
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
|
|
});
|