[jQuery] 스크롤 이벤트 : 프로세스 바 만들기

WEB/jQuery

[jQuery] 스크롤 이벤트 : 프로세스 바 만들기

developer of the night sky 2023. 10. 16. 11:36

🔻스크롤 위치에 따른 프로세스 바 만들기

기본 뼈대

에밋으로 작성하여 스크롤을 할 수 있을만큼 본문 내용을 추가한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ex10.html</title>

    <style>
        #bar{
            width: 50%;
            height: 7px;
            background-color: tomato;
            position: fixed;
            left: 0;
            top: 0;
        }

    </style>

</head>
<body>
    <div id="bar"></div>
    <h1>Lorem ipsum dolor sit amet.</h1>    

    <!-- (p>lorem100)*30 -->

    <script src="../asset/js/jquery-1.12.4.js"></script>

</body>
</html>

이벤트

DOM에서는 window.scrollY로 스크롤의 위치를 확인했다.

jQuery에서는 $(document).scrollTop()로 스크롤의 위치를 확인한다.

스크롤바 위치에 따른 프로세스바 크기를 구하기 위해 둘의 관계를 살펴보면, 문서의 세로 길이의 최대 위치일 때, 프로세스바의 크기가 100%가 된다.

이것을 1차 방정식으로 구하면 아래와 같은 식이 나온다.
스크롤바 최대 위치 : 100% = 스크롤바 위치 : x

let x = $(document).scrollTop() * 100 / ($(document).outerHeight()-$(window).outerHeight());

x의 값을 구하여 bar의 너비로 지정한다.

    <script>
        $(document).scroll(function() {
            // console.log($(document).scrollTop());

            let x = $(document).scrollTop() * 100 / ($(document).outerHeight()-$(window).outerHeight());

            $('#bar').css('width', x+'%');
        });
    </script>

저작자표시