스크롤 응용 진척도 문제

[Leehoya]

.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으로만 나오는데 답을 모르겠어서 질문드립니다.

[codingapple]

window.scrollY/totalHeight 를 변수에 저장해두고 써봅시다

[Leehoya]

js 코드를 이런 식으로 수정해서 됐습니다 그런데
$(window).on("scroll",function(){
  let totalHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  let currHeight =document.documentElement.scrollTop;
  let percentage =((currHeight/totalHeight))*100;
  document.querySelector(".progress-bar").style.width=percentage+"%";
})
Math.floor() 를 없애니까 0에서 100으로 확 안 넘어 가지게 되던데 소수점 이하를 반올림하는 것이 0과 100으로 확
넘어가는 이유에 대해서 궁금합니다.

[codingapple]

Math.floor는 가까운 정수로 내림해주는 함수라 0.8 도 0으로 만들어줘서 그런듯요

[글쓴이]

글