스크롤 응용 진척도 문제

.progress {
  width: 100%;
  height: 5px;
  background-color: #f0f0f0;
  position: fixed;
  top: 0;
  left: 0;
}
.progress-bar {
  height: 100%;
  background-color: black;
  width: 0%;
}

// js코드
$(window).on("scroll",function(){
  var totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var progress =Math.floor((window.scrollY/totalHeight))*100;
  if(progress ==100){
   document.getElementsByClassName("progress-bar")[0].style.width="100%";
  }else if(progress ==1){
    document.getElementsByClassName("progress-bar")[0].style.width="1%";
  }else if(progress ==50){
    document.getElementsByClassName("progress-bar")[0].style.width="50%";
  }
})

이런식으로 했는데 진척도가 보이지 않고 console 찍어서 확인해보니까 progress가 0과 100으로만 나오는데 답을 모르겠어서 질문드립니다.