title: Check if element is visible by percentage area after scrolling?
body: <p>How to detect visibility element <strong>by percentage area</strong> 50% or more?
  <a href="https://i.stack.imgur.com/gXZ6d.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gXZ6d.png" alt="visibility element by percentage JS"></a></p>
  
  <p>Javascript:</p>
  
  <pre><code>var i = setInterval(function() {
  
  var el = document.getElementById('test');
  var rect = el.getBoundingClientRect();
  
  if(
    rect.top &gt;= 0 &amp;&amp;
    rect.left &gt;= 0 &amp;&amp;
    rect.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
    rect.right &lt;= (window.innerWidth || document.documentElement.clientWidth) == true) {
    var div = document.getElementById('log').innerHTML = 'Visible';
    //clearInterval(i);
  }
    else {
      var div = document.getElementById('log').innerHTML = 'No visible';
    }
  
  },1000);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/rd2d2/otpep4dm/" rel="nofollow noreferrer">JSFIDDLE</a></p>