title: Detect if the second div is currently seen
body: <p>I am trying to detect the current div that is currently div that is currently seen by the user and trigger an action: <a href="http://jsfiddle.net/w7X9N/2293/" rel="nofollow">http://jsfiddle.net/w7X9N/2293/</a></p>
  
  <p>I have tried this, but for some reason is not triggering the action. I tried also on scroll and still it did not detected the white background div</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(
    function($) {
      $('#bla').bind('scroll', function() {
        if ($(this).scrollTop() + $(this).innerHeight() &gt;= $(this)[0].scrollHeight) {
          alert('user viewing div');
        }
      })
    }
  );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#flux {
    width: 200px;
    height: 150px;
    overflow: auto;
  }
  #bla {
    background: #FFF
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="flux"&gt;
    &lt;div id="flux2"&gt;
      Lorem ipsum dolor sit amet
      &lt;br&gt;Consectetuer augue nibh lacus at
      &lt;br&gt;Pretium Donec felis dolor penatibus
      &lt;br&gt;Phasellus consequat Vivamus dui lacinia
      &lt;br&gt;Ornare nonummy laoreet lacus Donec
      &lt;br&gt;Ut ut libero Curabitur id
      &lt;br&gt;Dui pretium hendrerit sapien Pellentesque
      &lt;br&gt;
  
    &lt;/div&gt;
    &lt;div id="bla"&gt;
      THIS IS THE DIV THAT SHOULD TIGGER ACTION
      &lt;br&gt;Phasellus consequat Vivamus dui lacinia
      &lt;br&gt;Ornare nonummy laoreet lacus Donec
      &lt;br&gt;Ut ut libero Curabitur id
      &lt;br&gt;Dui pretium hendrerit sapien Pellentesque
      &lt;br&gt;Pretium Donec felis dolor penatibus
      &lt;br&gt;Phasellus consequat Vivamus dui lacinia
      &lt;br&gt;Ornare nonummy laoreet lacus Donec
      &lt;br&gt;Ut ut libero Curabitur id
      &lt;br&gt;Dui pretium hendrerit sapien Pellentesque
      &lt;br&gt;Pretium Donec felis dolor penatibus
      &lt;br&gt;Phasellus consequat Vivamus dui lacinia
      &lt;br&gt;Ornare nonummy laoreet lacus Donec
      &lt;br&gt;Ut ut libero Curabitur id
      &lt;br&gt;Dui pretium hendrerit sapien Pellentesque
      &lt;br&gt;
    &lt;/div&gt;
    &lt;div id="another-div"&gt;
      &lt;br&gt;123456
      &lt;br&gt;123456
      &lt;br&gt;123456
      &lt;br&gt;123456
      &lt;br&gt;123456
      &lt;br&gt;123456
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>