スクロールで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 +'%)'}) 
}); 

だから私は画像を中央揃えするtransformプロパティを使用していますので、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; 
}