我正在尝试在滚动时平滑地减少元素顶部填充。同时我希望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)
});
});
我也尝试过(没有运气!)
var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));
答案 0 :(得分:2)
这样的东西?
DEMO http://jsfiddle.net/pXdhB/7/
$(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)
});
});
答案 1 :(得分:1)
喜欢这个吗?
$(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)
});
});
答案 2 :(得分:0)
试试这个。以下是相关代码:
var st = $(this).scrollTop(),
newPt = 100 - st;
console.log(st + " " + newPt)
if (newPt > 0) {
$('.transitionParent').css({
'padding-top' : newPt
})
}