티스토리 스킨 header에 Scroll Indicator 넣기

안녕하세요. 술도입니다.

 

 

조금 전 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;

 

이 정도는...다 아시죠???
이상입니다.