티스토리
티스토리 스킨 header에 Scroll Indicator 넣기
술도
2021. 7. 18. 07:31
반응형
안녕하세요. 술도입니다.
조금 전 daum 뉴스를 살펴보다가 스크롤을 하면 header에 Indicator 가 보이길래 알아보다가
아주 쉽게 적용할 수 있는 걸 발견해서 공유합니다.
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_indicator
페이지 접속이 되지 않을 경우 아래를 참고하시기 바랍니다.
티스토리 스킨편집에서
html에 추가할 코드
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</header> 바로 위에 넣으세요.
<script>
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>
html 하단의 </s_t3> 바로 위에 넣으세요
css에 추가할 코드
.progress-container {
width: 100%;
height: 8px;
background: #ccc; //progress-bar 배경색
}
.progress-bar {
height: 8px;
background: #04AA6D; //progress-bar 색
width: 0%;
}
끝입니다.
저 같은 경우에는 header border-bottom에도 색상을 주어서 조금 다르게 보일 수 있습니다.
저와 같이 header border-bottom 에 색상을 줄려고 하실 경우에는 아래 코드를 css #header 부분에 추가해 주시면 됩니다.
border-bottom: solid 1px #008299;
이 정도는...다 아시죠???
이상입니다.
반응형