IntersectionObserver - markhowellsmead/helpers GitHub Wiki

Simple example August 2023

const stickyElement = document.querySelector('.sht-block-editor-sidebar .shp-component--banner');

if (stickyElement) {
	const sentinel = document.createElement('span');
	sentinel.classList.add('o-sticky-sentinel');
	stickyElement.parentNode.insertBefore(sentinel, stickyElement);

	const handler = (entries) => {
		if (!entries[0].isIntersecting) {
			stickyElement.classList.add('is--stuck');
		} else {
			stickyElement.classList.remove('is--stuck');
		}
	};

	const observer = new window.IntersectionObserver(handler);
	observer.observe(sentinel);
}

Older example

IntersectionObserver to change navbar logo colour: see secret Gist (9.2.2023).

• IntersectionObserver