Check if the element is in the middle of window at scroll event

handleScroll.js

// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
function handleScroll() {
  const position = document.getElementById('content').getBoundingClientRect()

  // check if the element is in the middle of viewport(window)
  if (position.top < window.innerHeight/2 && position.bottom > 0 && position.bottom > window.innerHeight/2) {
    // do what you want to do
  }
}