Observe Position Changes of an HTML Element

observePosition.js

export function observePosition(element, callback) {
  const trackDiv = document.createElement("div")
  Object.assign(trackDiv.style, {
    position: "fixed",
    pointerEvents: "none",
    width: "2px",
    height: "2px",
  })
  if (element.children.length) {
    element.insertBefore(trackDiv, element.firstChild)
  } else {
    element.appendChild(trackDiv)
  }

  const fixPosition = () => {
    const rect = trackDiv.getBoundingClientRect()
    Object.assign(trackDiv.style, {
      marginLeft: `${parseFloat(trackDiv.style.marginLeft || "0") - rect.left - 1}px`,
      marginTop: `${parseFloat(trackDiv.style.marginTop || "0") - rect.top - 1}px`,
    })
  }
  fixPosition()

  const intersectionObserver = new IntersectionObserver(
    entries => {
      const visiblePixels = Math.round(entries[0].intersectionRatio * 4)
      if (visiblePixels !== 1) {
        fixPosition()
        callback()
      }
    },
    { threshold: [0.125, 0.375, 0.625, 0.875] }
  )
  intersectionObserver.observe(trackDiv)

  return () => {
    intersectionObserver.disconnect()
    trackDiv.remove()
  }
}