Skip to content

Latest commit

 

History

History
23 lines (18 loc) · 701 Bytes

README.md

File metadata and controls

23 lines (18 loc) · 701 Bytes

Detect what percentage of the element is visible in window

function percVisible(el) {
  const rect = el.getBoundingClientRect();
  const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
  const windowWidth = (window.innerWidth || document.documentElement.clientWidth);

  const left = Math.max(rect.left, 0);
  const right = Math.min(rect.right, windowWidth);
  const bottom = Math.min(rect.bottom, windowHeight);
  const top = Math.max(rect.top, 0);

  if (left < right && bottom > top) {
    return (right - left) * (bottom - top) / ((rect.right - rect.left) * (rect.bottom - rect.top));
  }
  return 0;
}

Working Example

https://jsfiddle.net/z0x5j6nd/1/