更改滾動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; 
}