如何使此进度条在向下滚动时开始显示动画？

<div class="progress-container">
  <div class="progress-bar"></div>
</div>

.progress-container {
  width: 100%;
  height: 20px;
  background-color: #f0f0f0;
}

.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0%;
  animation: progress-animation 2s ease-in-out;
}

@keyframes progress-animation {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

window.addEventListener('scroll', function() {
  var progressContainer = document.querySelector('.progress-container');
  var progressPosition = progressContainer.getBoundingClientRect().top;
  var windowHeight = window.innerHeight;

  if (progressPosition - windowHeight <= 0) {
    progressContainer.classList.add('animate');
  }
});

.animate .progress-bar {
  animation-play-state: running;
}