我想在手机屏幕上显示 Iphone 联系人列表样式列表。基本上，在滚动时，标题将是第一个可见项目的第一个字母。
例如：如果第一个可见项目是“阿迪达斯”，标题将是“A”：
我在其中创建了一个 ul 和很多 li：
<ul class="onlineShopList">
<li class="activeRow">
<span class="left">A1</span>
<span class="right">12 Articles</span>
<span class="clear"> </span>
</li>
<li class="normalRow">
<span class="left">A2</span>
<span class="right">18 Articles</span>
<span class="clear"> </span>
</li>
<li class="activeRow">
<span class="left">A3</span>
<span class="right">243 Articles</span>
<span class="clear"> </span>
</li>
<li class="normalRow">
<span class="left">B1</span>
<span class="right">191 Articles</span>
<span class="clear"> </span>
</li>
<li class="activeRow">
<span class="left">B2</span>
<span class="right">12 Articles</span>
<span class="clear"> </span>
</li>
<li class="normalRow">
<span class="left">B3</span>
<span class="right">18 Articles</span>
<span class="clear"> </span>
</li>
<li class="activeRow">
<span class="left">C1</span>
<span class="right">243 Articles</span>
<span class="clear"> </span>
</li>
<li class="normalRow">
<span class="left">C2</span>
<span class="right">150 Articles</span>
<span class="clear"> </span>
</li>
<li class="activeRow">
<span class="left">C3</span>
<span class="right">1 Articles</span>
<span class="clear"> </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，我想不通。滚动时第一项的顶部偏移量不会改变，也许这种方法是错误的。
请帮忙！