滚动 div 时（如果可见），在这个 div 上启动 jQuery 脚本

Question

我需要解决我的动画问题，而不是滚动 div。如果我将这段代码设置在这个函数之外，我的意思是这部分代码

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

一切正常，所有事件，如 mouseenter、movemose 等。当我尝试在页面滚动时为进度条设置动画时，这不起作用。这是我的代码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});
	}else{
   $('#bar'+dataNr).find('span').removeClass(dataColor);
 	}
});

.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

为什么我的数据有误？滚动此 div 时，我需要从 HTML 获取数据以设置进度条。当我输入$('#bar'+dataNr).find('span').removeClass().fadeIn(1000).addClass(dataColor).animate({width: dataWidth}); 时，进度条正在工作。在我的情况下，当您使用进度条滚动 div 时，希望激活进度条。

https://jsfiddle.net/k5gc96ex/