div 배경에 시차 효과 만들기, 패딩을 변경할 수 있습니까?

Question

그래서 제가 만들고있는 웹 사이트에 대해 div에 작은 시차 스크롤 효과를 만들었지 만, div의 패딩을 변경하여 효과를 조금 더 멋지게 만들 수 있기를 바랍니다. 내가 가기/하단에 패딩 원하는 페이지 상단을보고있을 때,

여기

jQuery('.bg-home').css('padding', (scrollPosition - 0.2) +' 0'); 

그래도 문제입니다 :

jQuery(document).ready(function() { 
    jQuery(window).bind('scroll', function(e) { 
     parallax(); 
    }); 
}); 

function parallax() { 
    var scrollPosition = jQuery(window).scrollTop(); 
    jQuery('.bg-home').css('background-position','0 '+(0 - (scrollPosition * 0.2))+'px'); 
} 

나는 내가이 라인을 따라 뭔가를해야 할 거라고 생각 75px가 되라. 내가 아래로 스크롤 할 때 천천히 0으로 가고 싶을 것이다. 어떻게해야 할 것인가?

Answer 1

패딩을 계산하려면 일부 수학이 필요합니다.

var padding = 75 - (($(window).scrollTop()/($(document).height() - $(window).height())) * 75); 

그리고 설명하기위한 시도 : 나는 수식이 같은 보일 것 생각
$(document).height() - $(window).height()을 = scrollTop
$(window).scrollTop/[max scrollTop]의 최대 값을 = 비율은 스크롤하지 않을 경우
[percentage scrolled] * 75는 = 우리가 공을받을 스크롤 완벽하게 스크롤 할 때, 우리는 스크롤하지 않을 경우 우리는 75를 필요 =
75 - [percentage scrolled * 75] (75)을 얻고, 완전히 스크롤 할 때 0, 그래서 우리는 75

나는 그것을 테스트하지 않았에서 빼기, 그래서 붙어 있다면 물어보십시오.