时间戳

首页 > 解决方案 > javascript 在页面滚动时被激活

javascript - javascript 在页面滚动时被激活

问题描述

我从codepen获得了一些代码，其中进度条根据给定的100个数字填充。我希望它在滚动到时激活，而不是在重新加载时激活，它当前设置为。我已经在这里找不到任何东西了。Javascript对我来说是新的，所以试着掌握它，谢谢

$('.progress-wrap').each(function(){
    percent = $(this);
    bar = $(this).children('.progress-bar');
    moveProgressBar(percent, bar);
});

  // on browser resize...
  $(window).resize(function() {
    $('.progress-wrap').each(function(){
        percent = $(this);
        bar = $(this).children('.progress-bar');
        moveProgressBar(percent, bar);
    });
  });

  // SIGNATURE PROGRESS
  function moveProgressBar(percent, bar) {
      var getPercent = (percent.data('progress-percent') / 100);
      var getProgressWrapWidth = percent.width();
      var progressTotal = getPercent * getProgressWrapWidth;
      var animationLength = 1000;

      // on page load, animate percentage bar to data percentage length
      // .stop() used to prevent animation queueing
      bar.stop().animate({
          left: progressTotal
      }, animationLength);
  }
<div class="progress-wrap progress star" data-progress-percent="70">
   <div class="progress-bar progress"></div>
   </div>

标签： javascripthtml

解决方案

看起来您正在使用 jquery - 在 vanilla javascript 中这样做会更容易，如下所示：

window.onscroll = function (e) {  
// called when the window is scrolled.  
}

您可能想看看：检测用户是否正在滚动浏览jquery 选项。

推荐阅读