基于滚动触发动画

Question

我有一个滚动事件，用于检查滚动位置，如果动画通过某个位置，则触发动画。这很好用，直到我尝试不同的浏览器高度。然后我的号码关闭了。如何保留我的代码并对其进行更改以使其适用于不同的浏览器高度。

这是我的代码的shell。

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}
            ]
        }
]