반응형
게시물 로딩바 보기
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
728x90
반응형
'log. > tistory custom' 카테고리의 다른 글
티스토리 자동목차 설정으로 쉽게조회수 늘리기 - 스크롤 따라 움직이는 반응형 목차(TOC) 만들기 (2) | 2024.12.09 |
---|---|
CodePen :: 티스토리에 HTML CSS JS 코드 예쁘게 첨부하기 (0) | 2024.12.03 |