Detect when Body Scroll hits top | bottom of element
<p>I'm trying to detect using javascript and jquery when the window scroll hits the top of a selected element.  I think I'm making progress but still no results:</p>

<p>fiddle: <a href="https://jsfiddle.net/jzhang172/opvb2csy/" rel="nofollow">https://jsfiddle.net/jzhang172/opvb2csy/</a></p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(window).scroll(function() {
    var targetScroll = $('.div').position().top;
    if($(window).scrollTop() &gt; targetScroll){
        alert('hey');
    });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>body,html{
  height:2000px;
}
.div{
  height:300px;
  width:300px;
  position:absolute;
  top:500px;
  background:red;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="div"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>