정보/블로그 운영팁

티스토리 스크롤 시 글 위치 표시 프로그레스바 간단하게 만들기

변태 개발자 아미넴 2021. 3. 9.

지금부터 본문 글을 위 아래로 이동할 때마다 위치를 표시해 주는 프로그레스바를 만들어 보겠습니다. 인디케이터, 진행바 등으로도 불립니다.

 

취향에 따라 수평(horizontal) 방향, 수직(vertical) 방향으로 적용할 수 있도록 둘 다 만들어 보았습니다. 제 블로그에는 일단 그냥 둘 다 적용해 놓았습니다. 생각보다 간단합니다.

 

참고로 북클럽 스킨 기준이오니 다른 스킨에서 정상적으로 작동하지 않을 수 있습니다. 수평 방향은 웬만하면 모든 스킨에서 정상 작동 할 것 같고 수직 방향은 스킨별로 수정을 좀 해야할 가능성이 높습니다. 다른 스킨에서 적용하다가 막히시는 분은 댓글 남겨 주시면 도와 드리도록 할게요.

 

내용 추가) 스크롤바가 있는데 굳이 프로그레스바가 왜 필요한 지 궁금하신 분이 계실텐데, 보통 본문 내용의 위치를 파악하기 위해 사용을 합니다. 댓글이나 기타 영역이 클 경우 스크롤바만으로는 본문의 정확한 위치를 알 수는 없습니다. 그리고 특정 운영체제(맥, 안드로이드, iOS 등)에서 스크롤 하기 전까지 스크롤바가 보이지 않아서 계속 신경써서 보지 않는 한 현재 위치를 바로 알기 어려운 점도 있구요.

 

목차

     

    수평 방향 프로그레스바

    먼저 수평 방향 프로그레스바를 적용해 보겠습니다.

    HTML 태그 작성

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭합니다.

     

    그럼 다음과 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

     

    <section id="container"> 태그를 검색하여 바로 아래 다음과 같이 붙여 넣으세요. 사실 position이 fixed라 어느 위치에 작성하시든 상관은 없는데 관련있는 부분에 작성하면 코드 관리에 더 수월할까 싶어서 이 부분에 넣어 보았습니다.

    다음을 복사하여 붙여 넣으시면 됩니다.

    <div class="progress-bar-horizontal"></div>

     

    자바스크립트 코드 작성

    다음은 자바스크립트로 함수를 하나 작성해 보겠습니다.

     

    body 태그 안쪽 제일 하단 script 태그 안에 붙여넣기 하시면 됩니다.

     

    다음 코드를 붙여 넣으시면 됩니다.

    function progressBarHorizontal() {
        var scrollTop = $(window).scrollTop();
        var likeButton = $('.container_postbtn');
        var likeButtonPosition = likeButton.length>0?likeButton.offset().top:0;
        var currentPosition = scrollTop/(likeButtonPosition-$(window).innerHeight());
        var $pbh = $('.progress-bar-horizontal');
    
        $pbh.css('width',(currentPosition*100)+'%');
        $pbh.css('opacity',0.7-(0.5*currentPosition));
    }
    
    $(window).on('scroll', function() {
        progressBarHorizontal();
    }

    상단부터 공감 버튼 위까지의 위치 값을 이용하여 0~100%의 비율을 구하고 프로그레스바의 크기를 조절하는 기능을 합니다.

     

    CSS 스타일 작성

    CSS는 다음 탭에서 작성하시면 됩니다.

     

    다음을 복사하여 붙여 넣으시면 됩니다. 위치는 크게 상관없습니다.

    .progress-bar-horizontal {
        height: 5px;
        background-color: #548a25;
        transition: all 0.1s linear;
        z-index: 1000;
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        opacity: 0;
    }

     

     

    수직 방향 프로그레스바

    다음은 수직 방향 프로그레스바를 적용하는 방법입니다.

    HTML 태그 작성

    관리 페이지 > 꾸미기 > 스킨 편집 으로 이동합니다.

     

    html 편집을 클릭합니다.

     

    그럼 다음과 같은 HTML 에디터가 뜨는데 여기에서 작업을 해 보겠습니다.

     

    수평 방향 프로그레스바를 적용한 것과 같이 <section id="container"> 태그를 검색하여 바로 아래 다음과 같이 붙여 넣으세요. 마찬가지로 어느 부분에 넣으시든 크게 상관은 없습니다.

     

    다음을 복사하여 붙여 넣으시면 됩니다.

    <div class="progress-bar-vertical"></div>

     

    자바스크립트 코드 작성

    body 태그 안쪽 제일 하단 script 태그 안에 붙여넣기 하시면 됩니다.

     

    수평 방향 프로그레스바를 적용한 것과 같은 위치에 다음을 붙여 넣으시면 됩니다.

    function progressBarVertical() {
        var scrollTop = $(window).scrollTop();
        var likeButton = $('.container_postbtn');
        var likeButtonPosition = likeButton.length>0?likeButton.offset().top:0;
        var currentPosition = scrollTop/(likeButtonPosition-$(window).innerHeight());
        var $pbv = $('.progress-bar-vertical');
    
        $pbv.css('height',(currentPosition*100)+'%');
        $pbv.css('left',$('.content-wrap').offset().left+'px');
        $pbv.css('opacity',0.7-(0.5*currentPosition));
    }
    
    $(window).on('scroll', function() {
        progressBarVertical();
    }

    화면 너비가 넓은 경우에 왼쪽에 너무 붙어있는 것이 마음에 들지 않아서 left 값을 본문 박스에 들어오도록 추가한 부분이 있는데 취향에 따라 이 부분은 제거하고 0으로 고정 하셔도 됩니다.

     

    CSS 스타일 작성

    CSS는 다음 탭에서 작성하시면 됩니다.

     

    다음을 복사하여 붙여 넣으시면 됩니다. 마찬가지로 위치는 크게 상관없습니다.

    .progress-bar-vertical {
        width: 5px;
        background-color: #548a25;
        transition: all 0.1s linear;
        z-index: 1000;
        display: block;
        position: fixed;
        top: 0;
        opacity: 0;
    }

     

    결과 확인

    상단과 좌측에 프로그레스바가 잘 적용되어 보이는 것을 확인할 수 있습니다.

     

    모바일 버전에서도 다음과 같이 잘 적용되어 보입니다. 바가 좀 흐릿하다는 생각이 들면 opacity 값을 0~1 사이로 조절해 보세요.

     

    영상으로도 확인해 보겠습니다.

     

    응용하면 좀 더 다양한 형태의 프로그레스바를 만들 수 있을 것 같은데 추후 시간이 되면 시도해 보고 포스팅 하도록 하겠습니다.

    유용하게 사용하시길 바랍니다 :)

    BIG

    댓글20

    💲 추천 글