title: How to detect when the user has scrolled to a certain area on the page using jQuery?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/5036850/how-to-detect-page-scroll-to-a-certain-point-in-jquery">How to detect page scroll to a certain point in jQuery?</a>
    <br> <a href="https://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling">Check if element is visible after scrolling</a>  </p>
  </blockquote>
  
  
  
  <p>How can I detect when the user has reached this div:</p>
  
  <pre><code>&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
  &lt;div id="theTarget"&gt;I have been reached&lt;/div&gt;
  </code></pre>
  
  <h2>EDIT</h2>
  
  <p>Got the answer from this question:</p>
  
  <p><a href="https://stackoverflow.com/questions/487073/jquery-check-if-element-is-visible-after-scroling">Check if element is visible after scrolling</a></p>
  
  <p>So I just did this:</p>
  
  <pre><code>function isScrolledIntoView(elem)
  {
      var docViewTop = $(window).scrollTop();
      var docViewBottom = docViewTop + $(window).height();
      var elemTop = $(elem).offset().top;
      var elemBottom = elemTop + $(elem).height();
      return ((elemBottom &gt;= docViewTop) &amp;&amp; (elemTop &lt;= docViewBottom) &amp;&amp; (elemBottom &lt;= docViewBottom) &amp;&amp; (elemTop &gt;= docViewTop));
  }
  
  $(window).scroll(function() {    
      if(isScrolledIntoView($('#theTarget')))
      {
          alert('visible');
      }    
  });
  </code></pre>