Jquery 在滚动时获取元素的顶部偏移量

Question

我想在手机屏幕上显示Iphone 联系人列表样式列表。基本上，在滚动时，标题将是第一个可见项目的第一个字母。

例如:如果第一个可见的项目是“阿迪达斯”，标题将为“A”:

我在其中创建了一个 ul 和很多 li:

<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()) {