Step CSS Animation with jQuery Scroll

Question

How can I incrementally step CSS animations with jQuery Scroll position?

i.e. If scrollTop height = 1, then animate marginTop -1px and so on till the max marginTop = -240px and then visa versa to marginTop: 0px? The folowing only moves 1X and not continuously.

My Function:

jQuery(window).scroll(function() {
    var height = jQuery(window).scrollTop();
    var x = 0;
    var n = 0;
    if(height  > x + 1) {
        jQuery('.myCarouselWrapper').css('marginTop', n-1);
    }//else if(height  < 219) {
    //jQuery('.myCarouselWrapper').css({'marginTop': '0px'});
    //}
});

This would allow the selector, .myCarouselWrapper [nested within a divide fixed to the top] to move "with" the scroll instead of just animating at a specific scroll position. This effect would be similar to the header in the Google 'Play Magazines' application.

Any help would be greatly appreciated. Thnx!

Mark S · Accepted Answer · 2013-12-04 05:41:48Z

1

I am not sure If I understood you very well. But maybe this can help:

jQuery(window).scroll(function() {
    var st = jQuery(this).scrollTop();
    if(st < 240){
        jQuery('.myCarouselWrapper').css({'marginTop':-Math.abs(st)});
    }
});

jsfiddle

answered Dec 4, 2013 at 5:41

Mark S

3,7993 gold badges21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Step CSS Animation with jQuery Scroll

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related