From c1e28224aa2e1450031669d9a7e359b63e04687d Mon Sep 17 00:00:00 2001 From: Volpeon Date: Wed, 22 Jul 2026 19:40:59 +0200 Subject: Init --- src/scripts/lib/siteHeader.ts | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/scripts/lib/siteHeader.ts (limited to 'src/scripts/lib/siteHeader.ts') diff --git a/src/scripts/lib/siteHeader.ts b/src/scripts/lib/siteHeader.ts new file mode 100644 index 0000000..0d9ec43 --- /dev/null +++ b/src/scripts/lib/siteHeader.ts @@ -0,0 +1,37 @@ +export function mountSiteHeader() { + const headerEl = document.querySelector(".c-site-header"); + + if (headerEl) { + const navbarEl = headerEl?.querySelector(".o-navbar--static-white"); + const logoEl = headerEl?.querySelector(".c-logo--static-white"); + const buttonEls = headerEl?.querySelectorAll(".o-button--static-white"); + + let settings: IntersectionObserverInit; + + const boundingRect = headerEl.getBoundingClientRect(); + + if (boundingRect.top > 0) { + settings = { + rootMargin: "1px 0px -100% 0px", + }; + } else { + settings = { + root: document.documentElement, + rootMargin: "-1px 0px 0px 0px", + threshold: [1], + }; + } + + const observer = new IntersectionObserver(([e]) => { + const scroll = e?.isIntersecting; + headerEl.classList.toggle("is-scroll", scroll); + navbarEl?.classList.toggle("o-navbar--static-white", !scroll); + logoEl?.classList.toggle("c-logo--static-white", !scroll); + for (const buttonEl of buttonEls) { + buttonEl.classList.toggle("o-button--static-white", !scroll); + } + }, settings); + + observer.observe(headerEl); + } +} -- cgit v1.3.1