HTML + CSS/JQuery

JQuery - 상단 스크롤 진행바

초코렛맛 2025. 4. 25. 13:41 
<style>
    body,h1,h2,p{margin: 0;}
    section{
        height: 120vh;
    }
    .scroll-bar {
        position: fixed;
        top: 0;
        left: 0;
        height: 5px;
        width: 0;
        background: #06f;
        z-index: 9999;
        transition: 0.3s ease-out;
    }
</style>

<body>
    <div class="wrap">
        <div class="scroll-bar"></div>
        <main>
            <section></section>
            <section></section>
            <section></section>
        </main>
    </div>

    <script>
        $(function(){
            $(window).scroll(function() {
                const scrollTop = $(this).scrollTop();                   // 현재 스크롤 위치
                const docHeight = $(document).height();                  // 전체 문서 높이
                const winHeight = $(window).height();                    // 현재 보이는 화면 높이
                const scrollPercent = (scrollTop / (docHeight - winHeight)) * 100;

                $('.scroll-bar').css('width', scrollPercent + '%');});
        })
    </script>

</body>