title: Check if element is partially in viewport
body: <p>I'm trying to determine if an element is <strong>partially</strong> or <strong>fully</strong> in the viewport.</p>
  
  <p>I've found this which will determine if an element is fully in view but kept getting confused when trying to determine partial visibility. I don't want to use jQuery.</p>
  
  <p>Basically, the idea is that there will be an element on the page that could be out of view. Once the user scrolls that element into view, even partially, it should trigger an event. I'll handle the event trigger by binding an onscroll event. I just need the detection to work properly.</p>
  
  <pre><code>function isInViewport(element) {
      var rect = element.getBoundingClientRect();
      var html = document.documentElement;
      return (
          rect.top &gt;= 0 &amp;&amp;
          rect.left &gt;= 0 &amp;&amp;
          rect.bottom &lt;= (window.innerHeight || html.clientHeight) &amp;&amp;
          rect.right &lt;= (window.innerWidth || html.clientWidth)
      );
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated!</p>