페이지 스크롤바 구현하기 > 그누보드5 팁자료실

그누보드5 팁자료실

페이지 스크롤바 구현하기 정보

페이지 스크롤바 구현하기

본문

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

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


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

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