8

以下は、iOS デバイスで見られるスティッキー ヘッダー効果をシミュレートする小さなスクリプトです。

$('.scrolllist').scroll(function(){
        $(this).find('ul').each(function(){
            if($(this).position().top <= 0){
                $(this).addClass('abs').find('strong').removeClass('mov');

                if($(this).position().top <= ($(this).height() * -1)){
                    $(this).removeClass('abs');
                    $(this).find('strong').addClass('mov');            
                }
                else {
                    $(this).addClass('abs');
                    $(this).find('strong').removeClass('mov');   
                }
            }
            else {
                $(this).removeClass('abs').find('strong').removeClass('mov');
            }
        });
    });

各要素のステータスを からpostion:absolute, top:0に変更するとposition:absolute, bottom:0;同時に、包含を<ul>からposition:relativeに変更することで、各要素の位置を変更します。position:static

サンプル: http://jsfiddle.net/dMJqj/80/

少しでもスムーズにするためにできることはありますか。Chrome と Firefox では少しぎこちなく見えます。スティッキー ヘッダーが点滅しているように見えるため、トリガーに数分の 1 秒かかる場合があります。

4

1 に答える 1

2

あなたが見ているけいれんは、jQuery と JavaScript 内のパフォーマンスの問題の結果であると想像します

これらの記事には、スクリプトのパフォーマンスを最適化するためのヒントが豊富に含まれています。

また、それ以上に、リストの場合abs、イベントが発生するたびにクラスが繰り返し追加および削除されているようですscrollposition.top < 0

それ自体では、視覚的なけいれんは発生しませんが、少量のメモリが不必要に焼かれます。

また、上記のいくつかのように、HTML が有効ではありませんでした。

いくつかの最適化手法が適用され、有効な HTML が適用され、不要なクラス操作が削除されたこのフィドルを参照してください。

http://jsfiddle.net/DW4pP/

于 2012-10-04T16:07:57.393 に答える