티스토리 스크롤 인디케이터 만드는 방법

728x90

스크롤바 인디케이터 만들기

블로그 꾸미기에 관심 있으신 분들이 많이 사용하고 계시는 스크롤 인디케이터 만드는 방법에 대해 간단하게 적용해 보겠습니다. 편집 > HTML편집 > CSS 이런 설명은 하지 않겠습니다. 다들 어디에 입력해야 하는구나 정도는 알고 계신 것으로 판단하기 때문에 쓸 때 없는 말을 줄이고 간단하게 설명드리겠습니다.

Css

.header {   position: fixed;   top: 0;   z-index: 1;   width: 100%;   background-color: #fff; } 
.progress-container {   width: 100%;   height: 3px;   background: #f6f6f6; } 
.progress-bar {   height: 3px;   background: #dbbbbb;   width: 0%; }

위에 첨부된 css 코드를 적당한 위치에 붙여 넣습니다. 인티케이터 노출 위치, 색상 변경을 등을 원하시면 progress-container 부분과 progress-bar 부분의 설정값을 변경하시면 됩니다.

Html

<div class="header">
<h2 data-ke-size="size26">Scroll Indicator</h2>
<div class="progress-container">
<div id="myBar" class="progress-bar">&nbsp;</div>
</div>
</div>

body 바로 아래 html코드를 붙여 넣습니다. 이 부분이 인디케이터가 설정되는 자리입니다. 테스트해 보시면서 자리를 잡으시면 되겠습니다.

JavaScript

<script>
// When the user scrolls the page, execute myFunction 
window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myBar").style.width = scrolled + "%";
}
</script>

마지막으로 스크립트를 body 하단 적당한 위치에 붙여 넣습니다. 어떻게 보면 여러 가지를 한듯하지만 아주 간단한 작업입니다. css에서 색상만 변경해 주셔도 만족하실 수 있습니다. 그럼 오늘도 작은 성공을 경험하시기 바랍니다.

적용결과 확인

See the Pen Untitled by HYUNBUM CHO (@HYUNBUM-CHO) on CodePen.

스크롤 인디케이터가 초록색으로 적용된 모습니다.

출처: w3school.com