상단 스크롤 바 업뎃

일단

티스토리 편집창에 들어가서

 

< html 탭 >

1. 헤더 상단에 입력

<div class = "progress-container">
        <div class = "progress-bar" id = "indicator"></div>
</div>

2. 스크롤 맨 밑 스크립트 하단에 입력

<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("indicator").style.width = scrolled + "%";
}
</script>

 

< css 탭 >

1. css 탭으로 이동해서 하단에 입력

.progress-container {
    position: fixed; /*상단 고정*/
    top: 0; /*페이지의 최상단에 붙어서 위치*/
    z-index: 1000; /*페이지의 다른 요소보다 가장 위에 나타나도록 설정*/
      width: 100%;
      height: 8px;
      background: #ccc;
}
 
.progress-bar {
      height: 8px;
      background: #ff91a7;
      width: 0%;
}

 

전~혀 어렵지 않다.ㅎㅎ

색상코드는 html색상표 검색하면 쉽게 나온다고 한다.

참고로 내 색상 코드는 210727 기준~꽃분홍~ ><

 

적용하고 보니 아래처럼 스크롤를 내리니까

상단에 굉장히 직관적인 스크롤바가 하나 생겼다. 헤헤 이뿌당ㅎㅎ