티스토리 뿐만 아니라 다른 사이트에도 적용이 가능합니다.
가끔 글내용이 길때 어디까지 더 읽어야하는지, 아니면 얼만큼 남았는지 궁금할때가 있습니다.
브라우저 스크롤도 있지만, 맥에서는 스크롤을 하기전까지 안보임으로 프로그레스바를 통해 얼만큼 스크롤 되었는지 알 수 있습니다.
위에 예시 이미지를 보시면, 상단에 붉은색 라인처럼 보여지며, 해당 블로그에서도 스크롤을 하면 프로그레스바를 확인 할 수 있습니다.
적용방법
<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 이걸 수정해주시면 됩니다. (두군데)
하나는 프로그레스바 전체의 색상이고, 하나는 움직이는 바 색상입니다. 본인 사이트나 블로그에 맞게 수정하시면 됩니다.
이상 완료입니다. 스크롤을 하시면 프로그레스 바가 움직이는걸 볼수 있습니다. (모바일에서도 동작합니다.)
728x90
