0

I have a scroll event that checks for the scroll position and triggers an animation if its passed a certain position. This works nicely until I try it with different browser heights. Then my numbers are off. How can I keep my code and alter it so it works for different browser heights.

Here is the shell of my code.

runStatus is where my animations are set. p is the position point. Now when I test in taller browsers the p value comes in later then when I test in shorter browser heights. Without having to re-write this whole thing I'm trying to see if there is something I can do to compensate for all browser heights.

I also tried using a percentage but it still doesn't trigger consistently if the browser is short or tall.

$(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}
            ]
        }
]
Chapsterj
  • 6,483
  • 20
  • 70
  • 124
  • try : `parseInt((document.body.scrollTop+($(window).height()/2))/$(window).height(),10)` – adeneo Nov 08 '12 at 21:48
  • Can you explain this. When I try it I get an error, but I also don't understand how this would work. Thanks for the help – Chapsterj Nov 08 '12 at 21:55
  • I fixed the error but the above code comes out as 0 matter where the scroll position is ? – Chapsterj Nov 08 '12 at 22:03
  • I just copy pasted it out from a parallax site I have. It seems to work there, and remember spending a lot of time on that exact problem figuring out how to get same result back regardless of window height, and I did find a solution, but it's so long ago I can't remember what it was, and I'm having trouble recreating it right now ? – adeneo Nov 08 '12 at 22:09
  • var scrollPos = $(this).scrollTop(); var windowFactor = ( scrollPos + ( $(window).height()/2 ) ) / $(window).height(); topScroll = parseInt(windowFactor, 10); I'm getting low value numbers like 0 - 6 for the entire scroll. Do I need to multiply it by something ? I guess because I don't understand your logic its hard to know what its meant to do. – Chapsterj Nov 08 '12 at 22:10
  • This does it [FIDDLE](http://jsfiddle.net/VdcZc/), it turns the scrolled position into a decimal, in other words it's between 0 and 1 regardless of window height, that was what I was missing, the one I posted earlier was something to figure out what menu option was active based on scroll position in parallax. – adeneo Nov 08 '12 at 22:19
  • Ok this is just getting a percentage between 0 - 1 but how is this going to help me with my code setup ? I'm still using pixel values for when to trigger the animations. see animData.runStatus[0].p – Chapsterj Nov 08 '12 at 22:25
  • this answer might help: http://stackoverflow.com/questions/11971475/setting-css-value-limits-of-the-window-scrolling-animation/11971912#11971912 – Barlas Apaydin Nov 09 '12 at 01:17

0 Answers0