进度条不单独加载

Question

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

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

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

请看例子：

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

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

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

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

进度条不单独加载

Progress bars not loading individually

css

jquery

progress-bar