Where where no one has gone before

const resizeObserver = new ResizeObserver(entries => { document.documentElement.style.setProperty( ‘—header-height’, ${entries[0].target.offsetHeight}px ); });

resizeObserver.observe(document.querySelector(‘header’));

const intersectionObserver = new IntersectionObserver(entries => { document.body.classList.toggle( ‘scrolled’, entries[0].intersectionRatio == 0 ); }, { rootMargin: ‘36px’ });

intersectionObserver.observe(document.head);

head { display: block; }

head > * { display: none; }