0

ユーザーがページをスクロールしたときに、DOMの4つのオブジェクトを移動したいと思います。

あなたは私が話しているページをこのアドレスでチェックすることができます：
http ：//www.tessuti-arredo.it/new/chi_siamo/rassegna/

ユーザーがスクロールすると- $（window）.scroll（function（）を使用しています-一部のオブジェクトを移動するためにwindow.scrollTopが10ピクセルを超えているかどうかを確認します。これは正常に機能しているようですが、ELSEステートメント（i scrollTopが10ピクセル未満の場合を意味します）-そしてこれらのオブジェクトは元の位置に戻る必要があります-特に私が移動する4つのオブジェクトのうちの2つ（クラスを呼び出して一緒に移動する2つの固定オブジェクト）で奇妙な動作をします。

私の貧弱な英語で説明するのは少し難しいかもしれませんが、私が上に投稿したアドレスを見ると非常に理解しやすいので、ページをスクロールしてみてください。

移動したいオブジェクトは次のとおりです。-リンク（a）#header div = $（ "＃header h1 a"）内に含まれるオブジェクト-id = $（ "＃sidebar"）で呼び出される左側のサイドバーメニュー-および2つの固定div、メインの水平メニューとその背景、クラスによって呼び出される= $（ "。moveMenu"）

最後に重要なことの1つは、Firefoxでは問題ないようですが、他のすべてのブラウザーでは、コードにエラーがあるように見える可変遅延があります。

私のコードについて言えば、ここにあります：

$(document).ready(function(){

    $(window).scroll(function(){
     if($(this).scrollTop() > 10) {
        $("#sidebar").stop().animate({top:'119px'}, 100, function (){   
                        // some callback
                    });

        $("#header h1 a").stop().animate({marginTop:'30px'}, 100, function (){
                        // some callback
                 });

         $(".moveMenu").stop().animate({top:'0'}, 300, function (){
               // here i change the class of fixed objects to call them back on else statement
                 $(this).removeClass('moveMenu').addClass('moveMenu2');
               });

        }else{  

            // this is happening with unwanted delay
            $(".moveMenu2").stop().animate({top:'90'}, 300, function (){
                    $(this).removeClass('moveMenu2').addClass('moveMenu');
                });

            $("#sidebar").stop().animate({top:'89px'}, 100, function (){
                        $(this).css({'padding-top' : '40px'}); 
                });

            $("#header h1 a").stop().animate({marginTop:'0px'}, 100, function (){
                            // some callback
                });
            }
    });

});

私はいくつかの空のコールバックがあることを知っています、私はそれを何かで満たす準備ができているようにそれらを保持しました、私はそれらを削除しようとしました、何も変更されません。

私が試したもう1つのことは、クラスではなく特定のIDで2つの遅延オブジェクトを呼び出すことですが、何も改善されていません...

私はあなたが私のコーディングにいくつかのエラーを見つけることを本当に望んでいます、私は私がそれほど良くないことを知っています。

4

1 に答える 1

0

私はIEで大きなラグを経験するだけで、Firefoxでは最小限でChrome（私のデフォルトのブラウザ）ではラグはありませんが、非常に速く上下にスクロールすると、スクリプトは完全にアニメーション化できません。window.onscrollは、スクロールが発生している間、信じられないほどの回数起動します-これがラグを作成するものです。この問題を改善するために私がテストしたいくつかの試みがあり、基本的には、イベントが発生するたびに発生する操作の数を最小限に抑える必要があります。

  1. まず、2つのdiv要素'mainmenubg'と'mainmenu'をクラス'moveMenu'の単一のdivに結合することから始めました。これにより、$（'。moveMenu'）と$（'。moveMenu2'）を介して1つの要素のみを参照およびアニメーション化することにより、効率が向上します。

  2. スクロールイベント中にオブジェクトを参照するために使用される3つのグローバルJavaScript変数を作成しました。$（'something'）を呼び出すたびに検索が行われますが、この場合、同じオブジェクトが常に参照されます。これにより、イベント自体から「クエリ」が削除され、効率が向上します。

    var asidebar = $("#sidebar");
var aheader = $("#header");
var amenu = $(".moveMenu");

    次に、外部のjavascriptファイルで、アニメーション呼び出しごとに次のようにします。 amenu.stop().animate({top:'0'},300,function(){$(this).removeClass('moveMenu').addClass('moveMenu2');});

  3. 最後に気付いたのは、オブジェクトがすでに配置されているかどうかに関係なく、アニメーションの呼び出しが発生することです。たとえば、ユーザーがページを下にスクロールして、メニューとヘッダーが新しい場所にアニメーション化されるようにします。さて、それらがそこにあると、ユーザーが下にスクロールし続けている間、アニメーション呼び出しを続ける理由はありません。代わりに、次のアニメーションは、ユーザーが10pxのしきい値に達し、オブジェクトを再配置する必要がある場合にのみ発生する必要があります。これを変更する1つの方法は、アニメーションを実行する必要があるかどうかを判断するために使用できるグローバル変数を作成することです。例：var change = 0;次に、外部ファイルに、状況をテストするネストされたifステートメントを追加します。

    if($(this).scrollTop() > 10){ if(change == 0){ ...animations... change = 1;}}

    else if( change == 1 ){ ...animations... change = 0;}

一般的に、これはすべてコードをより効率的にすることです。

2番目の質問への回答：

私はこの問題を経験していないので、あなたが何を意味するのかわかりません。ごめん！

于 2010-07-15T15:24:49.220 に答える