title: How much of an element is visible in viewport
body: <p>There's a <code>div</code> (brown rectangle) on the page. The page is higher than the viewport (orange rectangle) so it can be scrolled, which means that the <code>div</code> might only partially show up or not at all.</p>
  
  <p><a href="https://i.stack.imgur.com/g3P62.png" rel="noreferrer"><img src="https://i.stack.imgur.com/g3P62.png" alt="element visibility"></a></p>
  
  <p>What's the simplest algorithm to tell how much % of the <code>div</code> is visible in the viewport?</p>
  
  <p>(To make things easier, the <code>div</code> always fits into the viewport horizontally, so only the Y axis needs to be considered at the calculations.)</p>