我正在尝试减少滚动时元素顶部的平滑填充。同时,我希望2个子元素淡入淡出,其中1个元素掉进1英寸。我已经正确地淡出了,但我无法使填充顶部正常工作。有人可以看到我的功能有什么问题吗?

$(window).scroll(function () {
    $('.transitionParent').css({
        'padding-top' : $(this).scrollTop()-($(this).scrollTop()/500)
    });
    $('.ipadOutline').css({
        'opacity' : 1-($(this).scrollTop()/500)
    });
    $('.ipadPhoto').css({
        'opacity' : 0+($(this).scrollTop()/500)
    });
});

http://jsfiddle.net/pXdhB/1/

我也尝试过(没有运气!)
var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));

最佳答案

像这样吗
演示http://jsfiddle.net/pXdhB/7/
JQUERY

$(window).scroll(function () {
    $('.transitionParent').stop().animate({
        'padding-top': $(this).scrollTop() - ($(this).scrollTop() / 500)
    }, 1000, function () {
        // Animation complete.
    });
    $('.ipadOutline').css({
        'opacity': 1 - ($(this).scrollTop() / 500)
    });
    $('.ipadPhoto').css({
        'opacity': 0 + ($(this).scrollTop() / 500)
    });
});

09-10 05:34
查看更多