스크롤 할 때 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

자바 스크립트

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