jquery ScrollTop animation percent not pixels

Question

먼저 jQuery를 처음 사용한다고 말하고 싶습니다. 이 스크립트를 사용하여 사용자가 해당 지점으로 스크롤 할 때 두 div의 배경색에 애니메이션을 적용합니다. 첫 번째 div는 제대로 작동하지만 #contact가 위쪽에서 500 % 위치하기 때문에 #contact가 작동하지 않으므로 500 픽셀 아래로 스크롤하면 애니메이션이 실행됩니다. 픽셀에서 퍼센트로 변경하는 방법을 모르겠습니다.

자바 UI의 색상 섹션과 최신 버전의 jQuery와 함께 사용하고 있습니다.

또한 이것이 또 다른 질문이지만, 사용자가 다시 스크롤하면 애니메이션이 다시 실행되도록 div의 과거 항목을 스크롤하여 원래 상태로 돌아가는 방법이 있습니까?

JS 뿐인http://jsfiddle.net/8SWG4/

$ (창) .scroll (함수() {

if($(window).scrollTop() > 500){ 
$("#contact").stop().animate({ 
     backgroundColor: '#fff', 
    }, 1000); 
} 
else{ 

$("#about").stop().animate({ 
     backgroundColor: '#000', 
    }, 1000);  
} 

}); 

Answer 1

에는 스크롤 해당 소자로 전달 검출 $(element).offset().top를 사용할 수있다.

샘플 DEMO : http://jsfiddle.net/yeyene/8SWG4/6/

$(window).scroll(function() { 
    if($(this).scrollTop() >= $("#blog").offset().top){ 
     $("#contact").stop().animate({ 
      backgroundColor: '#000', 
     }, 2000); 
    } 
    if($(this).scrollTop() <= $("#blog").offset().top){ 
     $("#contact").stop().animate({ 
      backgroundColor: '#fff', 
     }, 2000); 
    } 
    if($(this).scrollTop() >= $("#home").offset().top/2){ 
     $("#about").stop().animate({ 
      backgroundColor: '#000', 
     }, 2000);  
    } 
    if($(this).scrollTop() <= $("#home").offset().top/2){ 
     $("#about").stop().animate({ 
      backgroundColor: '#fff', 
     }, 2000);  
    } 
}); 

Answer 2

500 %가 화면 밖으로 나오면 작동하지 않습니다. 50 %를 의미합니까? div에 높이를 어떻게 전달합니까?

어쨌든, 당신은 직접 %의 스크롤 높이를 해고 할 수는 없지만 같이 할 수있다 : 나는 $(document).height();을 사용

var a = $(document).height(); 
var a3= Math.floor(a * 0.3); // 30% 
var a5= Math.floor(a * 0.5); // 50% 
var a8= Math.floor(a * 0.8); // 80% 

,하지만 당신은 래퍼 DIV이있는 경우 $('#div_id').height();

처럼, 또한 사용할 수 있습니다

사용자가 뒤로 스크롤 할 때 애니메이션을 "다시 시작"하게하려면 here을 확인하십시오. yeyene의 제안을 사용하여 $(element).offset().top을 사용할 수도 있습니다.

$(window).scroll(function() { 
    a = b = c = false; 
    console.log($(window).scrollTop()); 
    if ($(window).scrollTop() > 0 && $(window).scrollTop() < 400) { 
     a = true; 
    } 
    if ($(window).scrollTop() > 399 && $(window).scrollTop() < 900) { 
     b = true; 
    } 
    if ($(window).scrollTop() > 899) { 
     c = true; 
    } 
    $("#home").stop().animate({ 
     backgroundColor: a ? '#00f' : '#fff', 
    }, 1000); 
    $("#about").stop().animate({ 
     backgroundColor: b ? '#0f0' : '#fff', 
    }, 1000); 
    $("#contact").stop().animate({ 
     backgroundColor: c ? '#f00' : '#fff', 
    }, 1000); 
});