Jquery滾動時獲取元素的頂部偏移

Question

我想在手機屏幕上顯示Iphone聯繫人列表樣式列表。基本上，滾動時，標題將成爲第一個可見項目的第一個字母。

例如：如果第一個可見的項是 '阿迪達斯'，報頭將是 'A'：

我創建在它的UL和許多立的：

<ul class="onlineShopList"> 
     <li class="activeRow"> 
      <span class="left">A1</span> 
      <span class="right">12 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="normalRow"> 
      <span class="left">A2</span> 
      <span class="right">18 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="activeRow"> 
      <span class="left">A3</span> 
      <span class="right">243 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="normalRow"> 
      <span class="left">B1</span> 
      <span class="right">191 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="activeRow"> 
      <span class="left">B2</span> 
      <span class="right">12 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="normalRow"> 
      <span class="left">B3</span> 
      <span class="right">18 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="activeRow"> 
      <span class="left">C1</span> 
      <span class="right">243 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="normalRow"> 
      <span class="left">C2</span> 
      <span class="right">150 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
     <li class="activeRow"> 
      <span class="left">C3</span> 
      <span class="right">1 Articles</span> 
      <span class="clear">&nbsp;</span> 
     </li> 
</ul> 

這是非常簡單的，這裏是jQuery的功能，以處理滾動和更改標題：

$(window).scroll(function() {     
       $top = $('.onlineShopList').offset().top; 
       /*console.log("item: " + $('.onlineShopList li:first:visible').find('span.left').text())    
       $('#headChar').text($('.onlineShopList li:first:visible').find('span.left').text().charAt(0));*/ 

       $('.onlineShopList li').each(function() { 
        console.log("current item top : " + $(this).offset().top) 
        if ($(this).offset().top >= $top) { 
         console.log("top char: " + $(this).find('span.left').text().charAt(0)) 
         $('#headChar').text($(this).find('span.left').text().charAt(0)); 
         return false; // stops the iteration after the first one on screen 
        } 
       }); 
     }); 

但頭總是A，我無法弄清楚這一點。 頂部第一項的偏移在滾動時不會改變，也許這種方法是錯誤的。

請幫忙！

Answer 1

嘗試這樣的：

if ($(this).offset().top >= $top + $(window).scrollTop()) { 

Answer 2

我試圖解決一個非常類似的問題。由於滾動事件頻繁發生，我擔心會在一系列的項目中獲得偏移量，因爲性能方面。我選擇接近它在由該建議的方式：

Using jQuery to find an element at a particular position?

隨着用戶滾動，我檢查哪個對象是我的視區的頂行中並相應地設置首標。