jquery - 进度条不单独加载

Question

我正在构建一个包含多个进度条的页面，这些进度条存在以下问题:

1 - 进度条在页面上可见时加载。问题是当第一个在视口(viewport)上可见时，它们都会同时加载。它们应该在一个一个独立地进入视口(viewport)时加载。

2 - 另一个问题是当我在页面底部并刷新浏览器时，只有当我一直滚动回到第一个栏时才会触发动画。

请看例子:

https://jsfiddle.net/f9c1szxu/

我希望有人能帮我解决这个问题。非常感谢!

JS

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
  }
  var IsViewed = false;
  $(document).scroll(function() {
    if (isScrolledIntoView('.progress-bar') && !IsViewed) {
      $('.bar-percentage[data-percentage]').each(function() {
        var progress = $(this);
        var percentage = Math.ceil($(this).attr('data-percentage'));
        $({
          countNum: 0
        }).animate({
          countNum: percentage
        }, {
          duration: 3500,
          easing: 'swing',
          step: function() {
            // What todo on every count
            var pct = '';
            if (percentage == 0) {
              pct = Math.floor(this.countNum) + '%';
            } else {
              pct = Math.floor(this.countNum + 1) + '%';
            }
            progress.text(pct) && progress.siblings().children().css('width', pct);
          }
        });
      });
      IsViewed = true;
    }
  });

Answer 1

你一次使用了所有的进度条，你需要一个一个地处理它们并且你处理的每个进度条都添加一个类到它不再处理它

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();
  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}
var IsViewed = false;
$(document).scroll(function() {

  $('.bar-percentage[data-percentage]:not(.viewed)').each(function() {
    var progress = $(this);
    if (isScrolledIntoView(progress.parent('.progress-bar'))) {

      var percentage = Math.ceil($(this).attr('data-percentage'));
      progress.addClass('viewed');
      $({
        countNum: 0
      }).animate({
        countNum: percentage
      }, {
        duration: 3500,
        easing: 'swing',
        step: function() {
          // What todo on every count
          var pct = '';
          if (percentage == 0) {
            pct = Math.floor(this.countNum) + '%';
          } else {
            pct = Math.floor(this.countNum + 1) + '%';
          }
          progress.text(pct) && progress.siblings().children().css('width', pct);
        }


      });

    }
  });

  IsViewed = true;

});

h2 {
  margin-bottom: 400px;
}

.progress-bar {
  position: relative;
  margin: 0 auto 2.0rem;
  height: 5.0rem;
  font-size: 0.8em;
  color: #000;
}

.progress-bar:last-child {
  margin-bottom: 0;
}

.bar-label {
  font-size: 12px;
  color: #000;
  text-transform: none;
  text-align: left;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.bar-percentage {
  margin: 0 auto;
  font-size: 1.0rem;
  position: absolute;
  top: 0.4rem;
  right: 0;
}

.bar-container {
  height: 1px;
  width: 100%;
  overflow: hidden;
  background: #EFEFEF;
}

.progress-bar.thick-bar .bar-container,
.progress-bar.thick-bar .bar {
  height: 1.0rem;
}

.bar {
  float: left;
  background: #000;
  height: 1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>
  Scroll down
</h2>

<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>
<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>
<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>
<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>


<h2>
  Scroll down
</h2>
<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>
<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>
<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>
<div class="progress-bar">
  <div class="bar-label">Web Design</div>
  <div class="bar-percentage" data-percentage="95"></div>
  <div class="bar-container">
    <div class="bar"></div>
  </div>
</div>

Updated JSfiddle