更改滚动div的位置

Question

我希望图像在向下滚动页面时向上滚动。我可以很容易地做到这一点，但我遇到的问题是，在jQuery中，我正在更改图像的CSS，特别是其transform属性。但我已经使用transform属性来居中对齐图像。

代码：

.planeImg { 
    position: absolute; 
    display: block; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    background: url("../images/plane.png"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index: 99; 
    height: 80px; 
    width: 300px; 
} 

$(window).on("scroll", function() { 
    var wScroll = $(this).scrollTop(); 
    $('.planeImg').css({'transform' : 'translate(0px, -'+ wScroll /2 +'%)'}) 
}); 

，是因为我使用的变换属性中心对齐形象，jQuery是buggering了我的图像的位置。

Answer 1

我改变了wScroll的计算方式，使滚动的图像跟随页面的滚动。请让我知道这可不可以帮你。

Fiddle

的JavaScript

$(window).on("scroll", function() { 
    var wScroll = ($(this).scrollTop()/$(window).height()) + 50; 
    $('.planeImg').css({ 
    'transform': 'translate(-50%, -' + (wScroll) + '%)' 
    }) 
}); 

CSS

.planeImg { 
    position: absolute; 
    display: block; 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%, -50%); 
    background: url("https://www.google.be/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); 
    background-size: contain; 
    background-repeat: no-repeat; 
    z-index: 99; 
    height: 80px; 
    width: 300px; 
}