Step CSS Animation with jQuery Scroll
How can I incrementally step CSS animations with jQuery Scroll position?
ie 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!
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
链接地址: http://www.djcxy.com/p/72058.html