3

モバイル画面にiPhoneの連絡先リストのスタイルリストを表示したい。基本的に、スクロール中、ヘッダーは最初に表示されるアイテムの最初の文字になります。

例：最初に表示されるアイテムが「Adidas」の場合、ヘッダーは「A」になります。

Iphoneスタイルリスト

私はその中に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であり、私はこれを理解できませんでした。最初のアイテムのトップオフセットはスクロール中に変更されません。おそらくこの方法は間違っています。

助けてください！

4

2 に答える 2

4

このようにしてみてください：

if ($(this).offset().top >= $top + $(window).scrollTop()) {
于 2012-07-10T14:34:17.517 に答える
1

私は非常によく似た問題を解決しようとしています。スクロールイベントはかなり頻繁に発生するため、パフォーマンスの観点から、アイテムの長いリストのオフセットを取得することを懸念していました。私はこれによって提案された方法でそれにアプローチすることを選びました：

jQueryを使用して特定の位置にある要素を検索しますか？

ユーザーがスクロールすると、ビューポートの一番上の行にあるオブジェクトを確認し、それに応じてヘッダーを設定します。

于 2013-07-24T04:27:07.810 に答える