0

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

这是我的代码的外壳。

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

0 回答 0