Toggles class and sets dynamic header height on CSS variable. Uses Intersection Observer API to target the site headers next element sibling.

header.js

const addMarginTop = () => {
	const siteHeader = document.querySelector('.site-header')
	const siteHeaderHeight = window.getComputedStyle(siteHeader).getPropertyValue('height')
	const siteHeaderSiblingEl = siteHeader.nextElementSibling

	if (!siteHeader || !siteHeaderSiblingEl) {
		return
	}

	siteHeaderSiblingEl.style.setProperty(`--header-height`, siteHeaderHeight)
}


export const load = () => {
	addMarginTop()

	window.onresize = () => {
		addMarginTop()
	}

	if ('undefined' != typeof wp && 'undefined' != typeof wp.customize) {
		wp.customize.bind('change', () => {
			setTimeout(() => {
				addMarginTop()
			}, 1500)
		})
	}
}

helpers.js

export const addClass = (elem, className) => {
	elem.classList.add(className)
}

export const removeClass = (elem, className) => {
	elem.classList.remove(className)
}

intersection-observer.js

import { addClass, removeClass } from './src/util/helpers'
import { load } from './src/components/header'



const SELECTOR            = document.body
const ANIMATE_CLASS_NAME  = 'animate'
const siteHeaderSiblingEl = document.querySelector('.site-header').nextElementSibling
const options             = {
	rootMargin: '0px',
	threshold:  1.0,
}

const onIntersection = entries => {
	entries.forEach(entry => {
		const { isIntersecting } = entry
		if (isIntersecting) {
			removeClass(SELECTOR, ANIMATE_CLASS_NAME)
		}

		if (!isIntersecting) {
			addClass(SELECTOR, ANIMATE_CLASS_NAME)
		}
	})
}

const init = () => {
	const observer = new IntersectionObserver(onIntersection, options)
	observer.observe(siteHeaderSiblingEl)
}


document.addEventListener(
	'DOMContentLoaded',
	() => init()
)


window.addEventListener(
	'load',
	() => load()
)