jquery, find div class name at a certain position while scrolling
<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>
