title: Get the element closer to the middle of the screen in jQuery
body: <p>I have a list of item divs in the page.</p>
  
  <p>example:</p>
  
  <pre><code>&lt;div data-page='1' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='1' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='1' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='2' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='2' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='2' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='3' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='3' class'item' &gt;&lt;/div&gt;
  &lt;div data-page='3' class'item' &gt;&lt;/div&gt;
  </code></pre>
  
  <p>I need to find out the element that is in the most center part of the screen and get its <code>data-page</code> number.</p>
  
  <p>If all the div are close to the button of the page or not visible because its down the page, I get the top most one because it's closer to the middle, and if all the div are above the middle or not visible because they are at the upper part of the window outside the visible view, I get the bottom most div because it's closer to the middle.</p>
  
  <p>What I've tried (<a href="https://stackoverflow.com/questions/7301961/add-a-class-to-the-image-closest-to-the-center-of-the-viewport">source</a>):</p>
  
  <pre><code>$(".item").sort(function(a,b){
        return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()/2) / $(a).position().top)) - 
               Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()/2) / $(b).position().top))
      })[0].css("background", "red");
  </code></pre>
  
  <p>The above function didn't work for me, because it highlighted in red a bottom most element.</p>
  
  <p>How can I do that in jQuery and also continuously report the closest one as I vertically scroll the page.</p>