CODEWITHSUNDEEP
jqueryscrollcss-animations
user742030
user742030

Reputation:

Step CSS Animation with jQuery Scroll

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!

Upvotes: 1

Views: 956

Answers (1)

Mark S
Mark S

Reputation: 3799

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

Upvotes: 1

Related Questions