2

画像を画面幅に拡大縮小し、すべての画像の拡大縮小された高さに設定されるスクロールラッパーを設定し、scrollTop値を調べてjQueryのcss（）を使用して画像の上部位置を設定する、単純な視差スクローラーを作成しています。主な機能は次のとおりです。

function positionSlides() {
    sT = $(window).scrollTop();
    $('div.slide img').each(function(){
        wp = $(this).attr('data-waypoint');
        if(sT >= wp){
            $(this).css({'top' : wp, 'border' : '1px solid red'});
            //console.log(sT + ':sT, ' + wp + ':wp');
        }
        else{
            $(this).css({'top' : ((wp-sT)/4)+sT, 'border' : '1px solid blue'});
        }
    });
}

境界線の色の設定は、どの条件ステートメントが通過するかをテストするためにあります。

positionSlides（）は、スクロールを介して呼び出されます

$(window).scroll(function(){
    positionSlides();
});

私の問題はsT >= wp、cssプロパティ'top'がの値に設定されていない場合ですwp。これは、elseステートメントによって渡された最後の値と思われる値に設定されます。これは。よりわずかに小さい値ですwp。しかし同時に'border' : '1px solid red'、同じifステートメントを介して正しく設定されます。

ステートメントのif部分に「top」プロパティが設定されていないのはなぜですか？

4

3 に答える 3

1

動作していない場所で初めてwp作業するときは、文字列です。2回目は、整数または浮動小数点数ですwp-sT。最初のバージョンを数値に変換すると機能します。

var wp = parseInt($(this).attr('data-waypoint'),10);
于 2013-01-16T01:02:22.360 に答える
0

私の推測では、どういうわけかwp期待値がロードされていません-ここで他の何かがうまくいかない可能性はあまりありません。

wpが期待する値を引き出していると確信していますか？要素のdata-waypoint属性はどのように設定されていますか？おそらくそれが原因ですか？

そうでない場合は、topが設定されると予想される値と、実際に設定される値の例を教えてください。

于 2013-01-15T23:02:42.837 に答える
0

あなたの問題は、すべてのスクロールイベントでこれを発生させていることです。たくさんあります。HTML5Rocks.comでこの記事をチェックしてください。基本的requestAnimationFrame()に、スクロールイベントではなく、毎回位置を使用して確認することをお勧めします。

あなたの場合、コードを次のように変更するだけです。

requestAnimationFrame(positionSlides);
于 2013-01-15T23:02:43.327 に答える