Progress_bar sample

간단한 프로그래스바를 만들어보자

html

<div class="procontent">
        <div class="progress_bar"></div>
    </div>

css

 .procontent {position:fixed; width:100%; height:5px; background-color:#eee; z-index: 99999;}
 .procontent .progress_bar {width:0; height:5px; background-color:#000; transition: .5s;}

js

window.addEventListener('scroll', function(){
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var Width = (scrollY /  height) * 100; document.querySelector('.progress_bar').style.width = `${Width}%`;
        });

window 스크롤을하면

scrollHeight (스크롤 전체화면) - clientHeight (보이는 실제화면)을
height 변수로 잡아준다.

scrollY(스크롤양) 을 height로 나누어 준뒤 * 100을 한것을
.progress_bar 의 width 값으로 넣어주고 % 을 붙인다.

그러면 .progressbar 의 width 값이 스크롤양에따라 눈에보이는 style로 변하게 된다.