Scroll Indicator Bar 적용 방법
1. 아래 좌표 코드 참고 (샘플)
https://codepen.io/tymoshenkoyelyzaveta/pen/QWyKBJa
2. <body> 태그 바로 아래애 아래 코드 추가
※ G5 basic 테마 경우, /theme/basic/head.sub.php 하단.
<div class="scrolled-indicator">
<div class="scrolled-indicator-fill">
</div>
</div>
3. CSS 파일 하단에 아래 코드 추가
※ G5 basic 테마 경우, /theme/basic/css/default.css 하단.
.scrolled-indicator {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background-color: #333;
z-index:999;
}
.scrolled-indicator-fill {
width: 0%;
height: 100%;
background-color: #e76f51;
}
4. </body> 태그 앞쪽에 아래 JS 코드 추가
※ G5 basic 테마 경우, /theme/basic/tail.php 하단
<script>
const scrolledIndicatorFill = document.querySelector(
".scrolled-indicator-fill"
);
const btnScrollToTop = document.querySelector("#btnScrollToTop");
// 스크롤 표시 함수
window.addEventListener("scroll", () => {
//스크롤 가능 정도
const scrollable = document.documentElement.scrollHeight - window.innerHeight; // 문서전체높이 - window 높이;
//스크롤 한 정도를 px단위로 표시
const scroll = window.scrollY;
let percentageScrolled = 100;
// 스크롤 가능 시
if (scrollable > 0) {
percentageScrolled = Math.ceil((scroll / scrollable) * 100);
}
scrolledIndicatorFill.style.width = `${percentageScrolled}%`;
});
</script>
PS. 콘텐츠 열람 집중에 방해되니, 가급적이면 적용하지 마세요.
최신댓글