javascript - 如何在窗口滚动时将数字递增 1

Question

我有一种固定在页面侧面的进度跟踪器，当您滚动时，我希望随着用户向下滚动页面，该行增加高度(以百分比表示)。当用户滚动时，我无法让高度只增加一个。这是我当前的代码。

JS

$(window).scroll(function(){
 var number = 0; /* I'd like to increment this by one on scroll */
 // Only start the process when the first section comes into view
 if($("#progress-tracker-nav li").hasClass('active-section')) {
  number++; /* I'd like to increment this by one on scroll */
  $(".progress-line").css('height', number + '%');
 }
})

Answer 1

您必须在 scroll 事件处理程序之外声明 number 变量，因为每次触发 scroll 事件时，变量值为刷新。

在您当前的代码中，每次为 number 变量分配 0 值。

var number = 0;
$(window).scroll(function(){ 
  number++;
  $("#number").text(number + '%');
})

body{
  height:1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="number"></div>