javascript - スクロールに基づいてアニメーションをトリガーする

Question

スクロール位置をチェックし、特定の位置を通過した場合にアニメーションをトリガーするスクロール イベントがあります。これは、さまざまなブラウザーの高さで試すまではうまく機能します。それから私の数はオフです。コードを保持して、さまざまなブラウザーの高さで機能するように変更するにはどうすればよいですか?

これが私のコードのシェルです。

runStatus は、アニメーションが設定されている場所です。p は位置点です。背の高いブラウザーでテストすると、p 値は、ブラウザーの高さを短くしてテストしたときよりも遅くなります。このすべてを書き直すことなく、すべてのブラウザーの高さを補うためにできることがあるかどうかを確認しようとしています。

パーセンテージも使用してみましたが、ブラウザが背が低いか背が高い場合、一貫してトリガーされません。

$(window).scroll(function () {
            topScroll = $(this).scrollTop();
            run();
        });

    function run(){
        for (var i=0; i < animData.length; i++) {
          update(animData[i]);
        };
    }

    function update(obj){
        var target = obj.target;
        var step = obj.runStatus.length;

        if(topScroll < obj.runStatus[0].p){
          step = 0;
        };

        switch(step){
            case 0:
                //if(obj.repeat) change(target,obj.runStatus[step]);
                break;
            case obj.runStatus.length:
                change(target,obj.runStatus[1]);
                break;
        }

    }

    function change(t,a,b){
      if(!t.data("complete")) animateTo(a,t);
    }

    function animateTo(a,t){
         t.animate( { left:a.x, top:a.y, opacity:a.opacity }, { duration: 600, easing: easing});    
    }


    var animData =[
        // scene 1
        {
            scene:"#scene1",
            name:"#compass",
            runStatus:[
                {p:220, y:500, opacity:0},
                {y:22, opacity:1}
                ]
        },
        {
            scene:"#scene1",
            name:"#chess-right",
            runStatus:[
                {p:260, y:600, opacity:0},
                {y:493, opacity:1}
            ]
        }
]