使用 jQuery 滚动步进 CSS 动画答案

【问题标题】：Step CSS Animation with jQuery Scroll使用 jQuery 滚动步进 CSS 动画
【发布时间】：2013-12-04 03:26:17
【问题描述】：

如何使用 jQuery 滚动位置逐步步进 CSS 动画？

即如果 scrollTop 高度 = 1，则为 marginTop -1px 设置动画，以此类推直到最大 marginTop = -240px，反之亦然到 marginTop: 0px？跟随只移动 1X 而不是连续移动。

我的功能：

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'});
    //}
});

这将允许选择器 .myCarouselWrapper [嵌套在固定到顶部的分隔中]“随”滚动移动，而不仅仅是在特定的滚动位置进行动画处理。这种效果类似于 Google 'Play Magazines' 应用程序中的标题。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： jquery scroll css-animations

【解决方案1】：

我不确定我是否非常了解您。但也许这会有所帮助：

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

jsfiddle

【讨论】：