使用jQuery Scroll实现CSS动画

我如何用jQuery Scroll位置递增地操作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杂志”应用中的标题类似。

任何帮助将不胜感激。 日Thnx！

---

我不确定如果我很了解你。 但也许这可以帮助：

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/72057.html

上一篇: Step CSS Animation with jQuery Scroll

下一篇: Get scroll height and set as top to an absolute positioned element