intersectionObserverOnMount.svelte

// Courtesy of: https://www.smashingmagazine.com/2021/07/dynamic-header-intersection-observer/
// * A little weird when scrolling up on high height dimensions, but more performant. A complete solution would require significantly more logic see: https://benfrain.com/building-a-table-of-contents-with-active-indicator-using-javascript-intersection-observers/
let curContSect = '';
onMount(() => {
  const observer = new IntersectionObserver(([entry]) => 
    entry.isIntersecting && (curContSect = entry.target.querySelector('.section-heading').id), { threshold: 0 })
  for (let el of [...document.querySelectorAll('.section-heading')]) observer.observe(el.closest('section'))
  return () => observer.disconnect();
});