Javascript jQuery在滚动到某一点时设置动画

我试图减少滚动条顶部的填充。同时我希望两个子元素淡入淡出，一个淡出，一个淡入。我的退色正确，但我不能让填充顶部正常工作。有人能看出我的功能有什么问题吗

$(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)
    });
});

---

我也试过（运气不好！）

像这样

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

像这样的事

演示

JQUERY

---

试试这个。以下是相关代码：

var st = $(this).scrollTop(),
    newPt = 100 - st;

console.log(st + " " + newPt)
if (newPt > 0) {
    $('.transitionParent').css({
        'padding-top' : newPt
    })
}

---

演示：

有点像@Spassvogel，我想让顶部的填充物逐渐减少，与窗口滚动相关，如果有意义的话？

$(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)
    });
});

var st = $(this).scrollTop(),
    newPt = 100 - st;

console.log(st + " " + newPt)
if (newPt > 0) {
    $('.transitionParent').css({
        'padding-top' : newPt
    })
}