tag * (also works in the ; it waits for ). * * Config: NAV_SELECTOR / BANNER_SELECTOR / PUSH_SELECTOR below. * Also exposes --hs-banner-offset on if you want to use it elsewhere in CSS. * ------------------------------------------------------------ */ (() => { // [0] Prevent double-initialization if (window.hsBannerNavbarOffsetV1) return; window.hsBannerNavbarOffsetV1 = true; const NAV_SELECTOR = '#navigation.w-nav'; const BANNER_SELECTOR = '[id^="hs-overlay-cta-"]'; const PUSH_SELECTOR = '#hs-web-interactives-top-push-anchor'; const ANCHOR_SELECTOR = '#hs-web-interactives-top-anchor'; const SETTLE_MS = 1400; // covers HubSpot's slide-in / collapse transitions const root = document.documentElement; const resizeObserved = new WeakSet(); const mutationObserved = new WeakSet(); let baseTop = null; // navbar's own sticky offset, read once before we override it let lastOffset = -1; let lastMode = ''; let rafId = null; let settleUntil = 0; let mutationObserver = null; let resizeObserver = null; // Runs from as well as from before if (document.body) init(); else document.addEventListener('DOMContentLoaded', init, { once: true }); function init() { injectStyle(); // [5] Watch everything that can change the banner height resizeObserver = 'ResizeObserver' in window ? new ResizeObserver(() => scheduleSync(false)) : null; // The banner is injected async, re-rendered, and closed by the visitor → watch // the DOM. Scoped on purpose: a subtree observer on would fire on every // Webflow interaction (IX2 writes inline styles constantly while scrolling). mutationObserver = new MutationObserver(() => { observeSizeTargets(); observeAnchors(); scheduleSync(true); }); // HubSpot's anchors are direct children of , so childList there is enough // to catch them appearing / disappearing mutationObserver.observe(document.body, { childList: true }); // Scroll doesn't need the settle window: the banner's reveal is picked up by the // ResizeObserver (height) or the anchor MutationObserver (class/style) window.addEventListener('scroll', () => scheduleSync(false), { passive: true }); window.addEventListener('resize', () => scheduleSync(true), { passive: true }); window.addEventListener('orientationchange', () => scheduleSync(true)); window.addEventListener('load', () => scheduleSync(true), { once: true }); observeSizeTargets(); observeAnchors(); scheduleSync(true); } // [1] Inject the rule once — the value itself is driven by a CSS variable function injectStyle() { const style = document.createElement('style'); style.setAttribute('data-hs-banner-navbar-offset', ''); style.textContent = ` html[data-hs-banner-shift="sticky"] ${NAV_SELECTOR} { top: calc(var(--nav-base-top, 0px) + var(--hs-banner-offset, 0px)) !important; } html[data-hs-banner-shift="flow"] ${NAV_SELECTOR} { margin-top: var(--hs-banner-offset, 0px) !important; } `; (document.head || root).appendChild(style); } // [2] Measure the space the banner takes at the top of the viewport function getBannerOffset() { let offset = 0; // 2a. HubSpot's own spacer already equals the banner height when it pushes content const push = document.querySelector(PUSH_SELECTOR); if (push) offset = Math.max(offset, push.getBoundingClientRect().height); // 2b. Overlay mode (no spacer): measure the banner itself, but only while it is // really pinned to the top of the viewport and visible document.querySelectorAll(BANNER_SELECTOR).forEach((banner) => { const cs = getComputedStyle(banner); if (cs.display === 'none' || cs.visibility === 'hidden' || cs.opacity === '0') return; const rect = banner.getBoundingClientRect(); if (!rect.height || rect.top > 1) return; // bottom banner / slid out → ignore offset = Math.max(offset, rect.bottom); }); return Math.max(0, Math.round(offset)); } // [3] Apply it to the navbar function sync() { const nav = document.querySelector(NAV_SELECTOR); if (!nav) return; const position = getComputedStyle(nav).position; if (baseTop === null) { const top = parseFloat(getComputedStyle(nav).top); baseTop = Number.isFinite(top) ? top : 0; root.style.setProperty('--nav-base-top', `${baseTop}px`); } const offset = getBannerOffset(); const mode = position === 'sticky' || position === 'fixed' ? 'sticky' : 'flow'; if (offset !== lastOffset) { lastOffset = offset; root.style.setProperty('--hs-banner-offset', `${offset}px`); } if (mode !== lastMode) { lastMode = mode; root.setAttribute('data-hs-banner-shift', mode); } } // [4] Re-measure on the next frame, then keep measuring for a short window so CSS // transitions (banner sliding in / collapsing) land on their final height function scheduleSync(settle) { if (settle) settleUntil = Math.max(settleUntil, performance.now() + SETTLE_MS); if (rafId !== null) return; rafId = requestAnimationFrame(function tick() { sync(); rafId = performance.now() < settleUntil ? requestAnimationFrame(tick) : null; }); } function observeSizeTargets() { if (!resizeObserver) return; [PUSH_SELECTOR, BANNER_SELECTOR].forEach((selector) => { document.querySelectorAll(selector).forEach((el) => { if (resizeObserved.has(el)) return; resizeObserved.add(el); resizeObserver.observe(el); }); }); } function observeAnchors() { [ANCHOR_SELECTOR, PUSH_SELECTOR].forEach((selector) => { document.querySelectorAll(selector).forEach((el) => { if (mutationObserved.has(el)) return; mutationObserved.add(el); mutationObserver.observe(el, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class', 'hidden'], }); }); }); } })();