스크롤 응용 문제 질문

프로그래스 바 만들었는데, 첫 화면이 아래의 사진과 같이 꽉 채워진채로 시작합니다. 그 이후에 스크롤 하면 그에 따라서 프로그래스 바가 알맞게
나타나는데, 왜 새로고침하고 첫 화면에서는 프로그래스바가 꽉 채워져서 나오는건지 궁금합니다.

<div class='status'></div>

<script>
 
window.addEventListener('scroll', function(){
const progress = window.scrollY
const total = (document.querySelector('html').scrollHeight)- (document.querySelector('html').clientHeight)
const percentage = (progress / total) * 100
$('.status').css('width', percentage + '%')

})
</script>

.status {
height: 5px;
background-color: salmon;
position: fixed;
top: 60px;
z-index: 5;
width: 100%;
}