페이지 스크롤바 구현하기

나리야 빌더 최신 버전에 구현된 코드이긴 하지만, 제가 예전에 사용하던 소스를 공유합니다.

사용하시는 테마 head.php 파일을 열어주세요

[code]

<!-- 상단 시작 { --> 바로 위에 아래 코드를 넣어주시면 끝

<div class="progressBar" style="position:fixed; top:0; left:0; width:0; height:5px; background-color:orange; z-index:10000"></div>

<script>

    $("document").ready(function(){

        $(window).scroll(function(){

            let pos = $(window).scrollTop();

            let outerHeight = $(document).outerHeight();

            let windowHeight = $(window).height();

            let current = (pos / (outerHeight - windowHeight)) * 100;

            $(".progressBar").width(current+"%")

    });

    })

</script>

[/code]

아래는 위치 헤갈려하시는 부분 방지 하고자 스샷으로 대처 합니다. 위 코드를 넣어주심 되세요

그럼 페이지 스크롤 내릴 때 마다 게이지 바가 차게 됩니다.

내가 수정하고 싶다면

height  길이값과 background-color 값만 변경 하시면 됩니다.

만약 맨위에 아닌 맨 아래에 적용하고 싶다면 top: 0 > bottom: 0; 으로 변경 해주시면 하단으로 구현 됩니다.

고맙습니다.