title: jquery, find div class name at a certain position while scrolling
body: <p>A fixed div  (<code>fixed_div</code>) stays at the top to display a Google map inside it. Then a big div (<code>big_div</code>) stays beneath it. The big div has inside it many small divs with class <code>small_div</code>. Each small div has an id <code>small_div_n</code> where n=0,1,2,3.. consecutively. The big div is scrolled beneath the fixed div.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="fixed_div" &gt;
  &lt;/div&gt;&lt;!-- end of class fixed_div --&gt;
  
  &lt;div class="big_div"&gt;
      &lt;div class="small_div" id="small_div_0"&gt;
      &lt;/div&gt;&lt;!--end of class small_div --&gt;
      &lt;div class="small_div" id="small_div_1"&gt;
      &lt;/div&gt;&lt;!--end of class small_div --&gt;
      &lt;div class="small_div" id="small_div_2"&gt;
      &lt;/div&gt;&lt;!--end of class small_div --&gt;
  &lt;/div&gt;&lt;!--end of class big_div --&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre class="lang-css prettyprint-override"><code>.fixed_div {
    position:fixed;
    height:100px;
  }
  
  .big_div {
    padding-top:100px;
  }
  
  .small_div {
    min-height:80px;
  }
  </code></pre>
  
  <p>Small divs have a variable height property.</p>
  
  <p>If I am able to know that a new <code>small_div</code> has reached the lower part of the fixed div , I can find the corresponding <code>id</code> of the small div and can understand which google map is to be shown in the fixed div through an ajax call.</p>
  
  <p>How to sense that a new <code>small_div</code> has reached the lower part of the fixed div?</p>
  
  <p><strong>EDIT</strong>: the big div has a <code>min-height</code> property.</p>