Question

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

$('.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>

Answer 1

看起来您正在使用jquery-在香草javascript中这样做会更容易：

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

您可能想看看：Detect if user is scrolling中的jquery选项。

Answer 2

这应该有效：

将#someElement替换为在视图中触发所需功能的元素的ID。

someFunction()是要在元素处于视图中时运行的功能

$(document).on('scroll', function() {
    if( $(this).scrollTop() >= $('#someElement').position().top ) {
        someFunction();
    }
});

将在页面滚动中激活的JavaScript

2 个答案: