Question

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

例如：如果第一个可见项目为“Adidas”，则标题为“A”：

Iphone style list

我创建了一个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()) {

Answer 2

我试图解决一个非常类似的问题。由于滚动事件频繁发生，我担心会在性能方面获得一长串项目的偏移量。我选择以这样的方式接近它：

Using jQuery to find an element at a particular position?

当用户滚动时，我会检查哪个对象位于视口的顶行，并相应地设置标题。

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

2 个答案: