[isInViewportArea] Check if element has reached specific viewport area #jsTrick

snippet.js

function isInViewportArea( element ) {
  const coords = getCoords( element );
  const viewportTop = pageYOffset;
  const viewportBottom = pageYOffset + document.documentElement.clientHeight;
  
  // If an element has appeared on the bottom.
  if ( viewportBottom > coords.top ) {
    return true;
  }
  
  // If an element has reached the top.
  if ( viewportTop > coords.top ) {
    return true;
  }

  // If an element has gone from the top.
  if ( viewportTop > coords.bottom ) {
    return true;
  }
}

function getCoords( elem ) {
  const box = elem.getBoundingClientRect();

  return {
    top: box.top + pageYOffset,
    bottom: box.bottom + pageYOffset,
    left: box.left + pageXOffset,
    right: box.right + pageXOffset
  }
}