title: How to continuously execute Javascript function when part of HTML is currently visible?
body: <p>I want to continuously execute specific Javascript function only when part of HTML document is visible. That implies stopping the execution of function when that part is not visible again.</p>
  <p>Getting out of visible scope means that element is out by:</p>
  <ul>
  <li>scrolling out (either vertical or horizontal)</li>
  <li>changing to some other browser tab</li>
  <li>shutting down tab/window/entire browser.</li>
  </ul>
  <p>Example code:
  I have HTML with a style to make sure that I have div main (entire page) and div target that is on my screen (1920 X 1080) below visible scope:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Title&lt;/title&gt;
  &lt;style type=&quot;text/css&quot;&gt;
      #main{
          height: 2300px;
      }
      .target{
          border: 1px solid black;
          position: relative;
          top:1000px;
          width:150px;
          height: 150px;
      }
  &lt;/style&gt;
  &lt;script scr=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id=&quot;main&quot;&gt;
          &lt;div class=&quot;target&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>What is the JS/Jquery code that will order:</p>
  <p><strong>when div.target is currently visible trigger execution of my_function()</strong></p>
  <p><strong>when div.target is scrolled out or tab is changed, stop execution of my_function()</strong>
  ?</p>