프로그래스바 만들기

 

body

  <!-- 배경 -->
    <div class="warp">
        <div class="content"></div>
    </div>
    <!-- 프로그레스바 -->
    <div class="progressbar">
        <div class="progress">
        </div>
    </div>

 

 

 

css

   /* content만 주면 위아래 공간이 생겨서 
        body와 html에 margin0주기 */

        html, body {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        /* 배경색주기 */
        .content{
            width: 100%;
            height: 1000px;
            background-color: aliceblue;
        }
        .progressbar{
            position: fixed;
            height: 10px;
            top:6px;
            right:0;
            width: 100%;
            /* 맨앞으로 */
            z-index: 500;
        }
        .progressbar > .progress{
            background-color:yellowgreen;
            width: 0%;/* 프로그래스바 진행정도 */
            height: 100%;
            /* width -일수록 빠르게 ease는 부드럽게되게 */
            transition: width 0.3s ease;/*애니메이션*/
        }

 

 

jquery

// 스크롤내렸을때지정
         window.addEventListener("DOMContentLoaded",function () {
            //스크롤이벤트실행
            window.addEventListener("scroll",function (e) {
                //프로그래스바가있다면 실행할수 있도록if 문작성
                if(document.querySelector(".progressbar") != null){//프로그래스바찾으면 null아닐때
                    setProgress();
                }
            })
        });
        
        function setProgress() {
            //스크롤한높이
            let currY = document.documentElement.scrollTop

            //전체높이
            let totalY = document.documentElement.scrollHeight- document.documentElement.clientHeight;
            // totalY = document.documentElement.scrollHeight(전체 스크롤길이:3000px) - document.documentElement.clientHeight(현재화면의 길이:280)

            //너비에 들어갈 퍼센트
            let percentage = (currY/totalY)*100;
            document.querySelector(".progress").style.width = percentage + "%";
        }

 

 

 

 

위의 코드 작성후

 

clientHeight : 280 scrollHeight: 3000

scrollHeight는 3000px

clientHight는 280px