진행률 막대가 백그라운드에서 지나갈 때 svg의 채우기를 변경하십시오.

Question

사용자가 100 픽셀 이상 아래로 스크롤 할 때 나타나는 진행 막대가 있습니다. 진행률 막대의 배경이 빨간색으로 채워집니다. 진행률 막대 컨테이너에는 흰색 트리의 svg도 들어 있습니다.

진행률 막대가 지나갈 때 어떻게 svg의 채우기 색상을 변경할 수 있습니까? 따라서 진행 막대가 트리의 중간을 지나치면 왼쪽 절반은 흰색이고 오른쪽 절반은 여전히 ​​빨간색입니다. 그게 가능한가? 나는 현재 jQuery를 사용하고있다.

나는 여기에 빠른 펜을 조롱 :

// fills progress bar on scrolldown 

jQuery(document).on('ready', function() { 
    var winHeight = $(window).height(), 
     docHeight = $(document).height(), 
     progressBar = $('progress'), 
     max, value; 

    /* Set the max scrollable area */ 
    max = docHeight - winHeight; 
    progressBar.attr('max', max); 

    jQuery(document).on('scroll', function(){ 
    value = $(window).scrollTop(); 
    progressBar.attr('value', value); 
    }); 
}); 
// end progress bar 

Answer 1

당신은 거의 다 : 여기

http://codepen.io/redbranchmedia/pen/aGfme 내가 진행률 표시 줄에 사용하고있는 스크립트입니다. 흰색 나무 뒤에 빨간 나무를 사용하는 것은 애니메이션 트릭입니다. 그래서 하얀 나무가 벗겨지면 빨간 나무가 나타납니다.

Earlier revision은 SO 질문에 대답하지만 다양한 창 너비와 창 확대 (100 % 픽셀 정확하지 않음) (더 많은 수학으로 해결할 수 있음). 그러므로 아래의 새로운 업데이트입니다.

업데이트 : 신차 codepen 예 : 그라디언트를 사용하여 점차 흰색으로 변합니다. 나중에 흰색으로 바꾸려면 0.1을 (max*0.1)으로 조정하십시오.