[티스토리 블로그] 헤더에 scroll indicator 넣기

728x90

목 차

• 1. 스크롤 인디케이터 (Scroll Indicator)란?
• 2. 티스토리 헤더 고정하는 방법
• 3. html 태그 입력
• 4. 자바스크립트 입력
• 5. CSS 입력
• 6. Scroll Indicator 확인하기

반응형

 

"고정된 헤더 영역에 스크롤 인디케이터를 어떻게 만들까?"

 

1. 스크롤 인디케이터 (Scroll Indicator)란?

• Scroll indicator는 웹사이트나 애플리케이션에서 페이지의 스크롤 진행 상황을 시각적으로 보여주는 UI 요소입니다. 사용자가 현재 페이지의 어느 위치에 있는지를 쉽게 파악할 수 있도록 도와줍니다.

 

 

2. 티스토리 헤더 고정하는 방법

 참고 글 ) 티스토리 스킨 스크롤 헤더 고정, 사이드바 메뉴 고정

티스토리 스킨 스크롤 헤더 고정, 사이드바 메뉴 고정

 

3. html 태그 입력

• 고정되어 있는 헤더 영역에 스크롤 인디케이터가 영역을 만들어 줍니다.
• <header> 태그를 찾아 마지막에 넣어 줍니다.

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

인디케이터 영역 html 소스 입력하기

 

 

4. 자바스크립트 입력

• 자바스크립트 소스를 복사하여 html 태그 마지막 부분에 붙여넣기 한다.
• 화면 전체 스크롤 길이와 스크롤 위치의 비율을 계산해서 css width 속성의 길이를 변경하는 방식입니다.

<script>
    // When the user scrolls the page, execute myFunction 
    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("genieItBar").style.width = scrolled + "%";
    }
  </script>

 

 

인디케이터 자바스크립트 소스 입력

 

5. CSS 입력

• CSS 탭으로 이동하고 가장 마지막에 CSS 소슬를 복사해서 붙여넣기 합니다.

.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;
}

.progress-bar {
  height: 8px;
  /*background: #04AA6D;*/
  background:skyblue;
  width: 0%;
}

 

 

인디케이터 CSS 소스 입력

 

6. Scroll Indicator 확인하기

• 고정된 헤더 바로 밑에 스크롤할 때마다 인디케이터 영역에 변화가 있는지 확인합니다.

인디케이터 기능 테스트 완료