/** * Marks the page as scrolled. * * A header can carry a second set of colours for the scrolled page - transparent over the hero, * solid once the reader has moved on, the way the Flatsome transparent header works. The * stylesheet holds both states; this only says which one applies. Without the script the header * keeps its normal colours, which is a readable page, not a broken one. */ export function initScrolled(doc = document) { const view = doc.defaultView; let queued = false; const sync = () => { queued = false; doc.documentElement.classList.toggle('is-scrolled', view.scrollY > 40); }; const onScroll = () => { if (!queued) { queued = true; view.requestAnimationFrame(sync); } }; view.addEventListener('scroll', onScroll, { passive: true }); sync(); return () => { view.removeEventListener('scroll', onScroll); doc.documentElement.classList.remove('is-scrolled'); }; } if (!document.querySelector('#editor')) initScrolled();