본문 바로가기
  • 쇼핑몰
  • 커뮤니티
  • 북마크
이야기/개발(developer)

[개발]티스토리 상단 스크롤 프로그레스바 적용하기

by 빽짱구 2021. 1. 20.

티스토리 뿐만 아니라 다른 사이트에도 적용이 가능합니다.

 

상단 스크롤 로딩바

 

가끔 글내용이 길때 어디까지 더 읽어야하는지, 아니면 얼만큼 남았는지 궁금할때가 있습니다.

브라우저 스크롤도 있지만, 맥에서는 스크롤을 하기전까지 안보임으로 프로그레스바를 통해 얼만큼 스크롤 되었는지 알 수 있습니다.

 

위에 예시 이미지를 보시면, 상단에 붉은색 라인처럼 보여지며, 해당 블로그에서도 스크롤을 하면 프로그레스바를 확인 할 수 있습니다.

 

 

 

적용방법

 

<script>
    $(window).scroll(function() {
	  var wins = $(this).scrollTop();
	  var hei = $('#tt-body-page').outerHeight();
	  var hei2 = $(window).outerHeight();
	  var height = hei - hei2;
	  var bar = (wins / height) * 100;

	  $('#myBar').css('width', bar + '%');
	});
</script>

 

위에 소스를 </head> 안에 삽입합니다. 

여기서 #tt-body-page 아이디 값은 최상단의 id나 class값을 넣으시면 됩니다.

 

 

크롬 개발자도구를 이용하시면 쉽게 찾을 수 있습니다.

 

<div class="scroll-bar">
  <div class="progress-container">
    <div class="progress-bar" id="myBar"></div>
  </div>
</div>

 

그리고 프로그래스바가 보여질 곳 <bod> 바로 아래 넣으셔도 됩니다.

사실 position이 fixed로 되어있어서 아무곳에 넣어도 상관은 없으시다만, 편의상 <body>바로 아래 넣도록 하겠습니다.

 

.scroll-bar {
  position: fixed;
  top: 0;
  z-index: 9999;
  width: 100%;
}

.progress-container {
  width: 100%;
  height: 1px;
  background: none;
}

.progress-bar {
  height: 1px;
  background: #FF4848;
  width: 0%;
  transition: all .1s ease;
}

 

위에 소스는 css에 넣습니다.

background 색상과 프로그레스바 높이는 height: 1px 이걸 수정해주시면 됩니다. (두군데)

하나는 프로그레스바 전체의 색상이고, 하나는 움직이는 바 색상입니다. 본인 사이트나 블로그에 맞게 수정하시면 됩니다.

 

이상 완료입니다. 스크롤을 하시면 프로그레스 바가 움직이는걸 볼수 있습니다. (모바일에서도 동작합니다.)

댓글6[댓글정책]