0

サイトに視差スクロール効果を実装しようとしています ( Smashing Magazineのこのチュートリアルを使用)。視差効果は正常に機能していますが、特定のポイントに達したときにスプライトの 1 つがスクロールを停止するようにする必要があります。デフォルトでは、表示されなくなるまでスクロールし続けます。

視差効果は、要素の背景位置をアニメーション化することによって機能します。このコードを使用して動的な背景位置を取得しようとしています:

jQuery(function($) {

            var elem = $("#heart-box");

            var backgroundPos = $(elem).css("backgroundPosition").split(" ");

            var xPos = backgroundPos[0],
                yPos = backgroundPos[1];

            $(window).scroll(function() {

                console.log(yPos);

                if ( yPos >= 210 ) {
                    $(elem).hide();
                }
            });

        });

代わりに、CSS で定義されているように、開始位置だけが返され、ページがスクロールされたときにコンソール ログで変更されません。

ページがスクロールされると、背景の Y 位置が動的に変更されます。その範囲は、開始時に約 -200px から終了時に 400px までです。背景の Y 位置が 210px に達したら、要素の背景位置を 210px に固定し、スクロールし続けないようにします。

どんな助けでも素晴らしいでしょう。ありがとう。

4

1 に答える 1

3

yPosコールバックの外で backgroundPosition の値に設定されているため、初期値が返されscrollます。Javascript では、オブジェクトのみが参照によって渡されるため、backgroundPos取得した CSS プロパティが変更されてもyPos、xPos変数 (プリミティブ型 - この場合は文字列) は変更されません。再割り当てしないため、最初に割り当てられた値が保持されます。

これを期待どおりに機能させるには、コールバック内の現在の背景位置を取得する必要がありscrollます。

$(window).scroll(function() {

    var backgroundPos = $(elem).css("backgroundPosition").split(" ");
    var xPos = backgroundPos[0],
        yPos = backgroundPos[1];

    console.log(yPos);

    if ( yPos >= 210 ) {
        $(elem).hide();
    }

});

これを少し効率的にするため$(elem)に、スクロール コールバックの外側の変数に結果を代入して、すべてのスクロール イベントでセレクターが呼び出されないようにすることができます (文字列をセレクターとして使用している場合はより適切です)。

var elem = $(elem);
...
elem.css("backgroundPosition").split(" ");
于 2013-04-05T09:44:37.527 に答える