https://www.houstonlanding.org/srv/htdocs/wp-content/plugins/houst…//js/helpers/scroll-check.js?ver=2327

1const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
2  const { top, left, bottom, right } = el.getBoundingClientRect();
3  const { innerHeight, innerWidth } = window;
4
5  // return partiallyVisible
6  //   ? (
7  //       (top > 0 && top < (innerHeight * (partiallyVisible || 1))) ||
8  //       // (top > (innerHeight / 2) && top < innerHeight) ||
9  //       (bottom > 0 && bottom < innerHeight)
10  //     ) &&
11  //     (
12  //       (left >= 0 && left < innerWidth) || 
13  //       (right > 0 && right <= innerWidth)
14  //     )
15  //   : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
16
17
18  // Ignore left / right visibility 
19  return partiallyVisible
20    ? (
21        (top > 0 && top < (innerHeight * (partiallyVisible || 1))) || 
22        (bottom > 0 && bottom < innerHeight) || 
23        (top < 0 && bottom > innerHeight)
24      )
25    : (
26        (top >= 0 && bottom <= innerHeight) || 
27        (top < 0 && bottom > innerHeight)
28      );
29};
30
31const getElementPercentVisibility = (ele) => {
32  const { top, bottom } = ele.getBoundingClientRect();
33  const { innerHeight } = window;
34
35  let visibility = 0;
36
37  if(elementIsVisibleInViewport(ele, true)) {
38    visibility = (bottom < (bottom - top)) ? (bottom / (bottom - top))*100 : 100
39  }
40
41  return visibility;
42
43};