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

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

 

취향에 따라 수평(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 사이로 조절해 보세요.

 

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

 

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

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