javascript || jquery

scroll progress 상단에 나타내기

솨솨_ 2024. 7. 19. 16:50

원래는 document 높이를 가져와서 스크롤을 했었는데 예시에서는 작동을 안 하길래 

임시 컨테이너를 만들어 사용했다

 

 

window에 적용하려면 아래를 사용하면 된다.

  window.addEventListener('scroll',function(){
   var progress = document.querySelector('.progreeBar')
   var windowTop = window.scrollY;
   var winHeight = window.innerHeight;
   var docuHeight = document.documentElement.scrollHeight;
            
   var scrolling = (windowTop /(docuHeight - winHeight)) * 100;
   progress.style.width = scrolling + '%';
 })