div (표시된 경우) 위로 스크롤 할 때이 div에서 jQuery 스크립트를 시작하십시오.

Question

div를 스크롤하는 것보다 생기있는 문제에 대한 해결책이 필요합니다. 나는이 기능 중이 코드를 설정하면 나는 페이지가이 스크롤 때이 진행 막대 애니메이션을하려고 할 때, 나는

$('#bar'+dataNr).find('span').removeClass().addClass(dataColor).animate({width: dataWidth}); 

모든뿐만 아니라 작동되는 코드의이 부분, movemose 등 mouseenter 같은 모든 이벤트를 의미 작동하지 않습니다. 여기에 내 코드 잘못에 https://jsfiddle.net/y2th0cwk/

$(window).scroll(function(){ 
 
    var dataColor = $(this).data('color'); 
 
    var dataWidth = $(this).data('width'); 
 
    var dataNr = $(this).data('nr'); 
 

 
    if($(this).scrollTop()>0){ 
 
    $('#bar'+dataNr).find('span').removeClass().fadeIn(1000).addClass(dataColor).animate({width: dataWidth}); 
 
\t }else{ 
 
    $('#bar'+dataNr).find('span').removeClass(dataColor); 
 
    \t } 
 
});

.progress-bar { 
 
    background-color: rgba(0,0,0,0.7); 
 
    height: 25px; 
 
    padding: 5px; 
 
    width: 300px; 
 

 
    border-radius: 5px; 
 
    } 
 

 
.progress-bar span { 
 
    display: inline-block; 
 
    height: 100%; 
 
    width: 0; 
 
    border-radius: 3px; 
 
} 
 

 
.blue { 
 
    background-color: #34c2e3; 
 
}

<div class="container skillsBar"> 
 
     <h2>Skills</h2> 
 
     <div class="skills1"> 
 
     <p class="changeBar" data-width="30%" data-color="blue" data-nr="1">PHP/WordPress</p> 
 
      <div id="bar1" class="progress-bar"> 
 
      <span></span> 
 
      </div> 
 
     </div> 
 
</div>

Answer 1

왜 datas입니까? 이 div 위로 스크롤 할 때 HTML에서 진행률 표시 줄을 설정하기 위해 데이터를 가져와야합니다. 넣어 때 $('#bar'+dataNr).find('span').removeClass().fadeIn(1000).addClass(dataColor).animate({width: dataWidth}); 진행률 표시 줄이 작동합니다. 제 경우에는 능동태 진행 막대를 사용하여 div 위로 progres 막대를 스크롤하십시오.

https://jsfiddle.net/k5gc96ex/