Cute Light Pink Flying Butterfly 티스토리 게시물 상단에 읽기 진행도 표시하기 - 상단 프로그레스바로 완성! :: 놀면서 돈벌기
본문 바로가기
  • 놀면서 돈벌기
log./tistory custom

티스토리 게시물 상단에 읽기 진행도 표시하기 - 상단 프로그레스바로 완성!

by 왓츠뉴 whatsnew 2024. 12. 9.
반응형

게시물 로딩바 보기

 

1. HTML

1.1. <body> 태그내 최상단에 div 코드 추가


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

 

1.2. <body> 태그내 최하단에 script 코드 추가


  
<!-- content progress-bar-->
<script>
$(window).scroll(function() {
var wins = $(this).scrollTop();
var hei = $('#content').outerHeight();
var hei2 = $(window).outerHeight();
var height = hei - hei2;
var bar = (wins / height) * 100;
$('#myBar').css('width', bar + '%');
});
</script>
<!-- content progress-bar-->

여기서 '#content' 부분이 게시물 시작되는 부분의 태그인데요.

태그명이 다를 수 있으니 본인의 블로그에서 게시물이 시작되는 div의 id가 무엇인지

관리자도구-검사로 체크해서 해당하는 div id를 작성해주세요.

저는 게시물이 시작하는 부분의 태그아이디가 content여서 '#content'라고 설정하였습니다.

2. CSS

CSS 최하단에 코드추가


  
/* content progress-bar */
.scroll-bar {
position: fixed;
top: 0;
z-index: 9999;
width: 100%;
}
.progress-container {
width: 100%;
height: 2px; /* 로딩바 굵기 */
background: none;
}
.progress-bar {
height: 2px; /* 로딩바 굵기 */
background: #ffb8b8; /* 로딩바 색상 */
width: 0%;
transition: all .1s ease;
}

 

참고한 글

https://webmini.tistory.com/1007

 

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

티스토리 뿐만 아니라 다른 사이트에도 적용이 가능합니다. 가끔 글내용이 길때 어디까지 더 읽어야하는지, 아니면 얼만큼 남았는지 궁금할때가 있습니다. 브라우저 스크롤도 있지만, 맥에서는

webmini.tistory.com

 

728x90
반응형