김서훈

간단한 스크롤 진행률 표시기 구현하기

· 2024-01-10 (수) 14:59:50 · 1703 · 4

<style type="text/css">
.progress-bar { position:fixed; top:0; left:0; width:0%; height:5px; background-color:blue; z-index:9999; }
</style>
<div class="progress-bar"></div>
<script type="text/javascript">
$(window).on('scroll', () => {
 let scrollPercent = $(window).scrollTop() / ($(document).height() - $(window).height()) * 100;
 $('.progress-bar').width(scrollPercent + '%');
});
</script>

이 기능은 사용자가 페이지를 얼마나 스크롤 했는지 시각적으로 보여주는 간단하지만 효과적인 방법입니다.

 

head.sub.php에 업로드 하셔서 사용 하시면 됩니다.

 

|

댓글 4개

안녕하세요.

head.sub.php에 업로드 하셔서 사용 하시면 됩니다.

=> 테마에 있는 파일인가요? 아니면 루트에 있는 파일인가요? 

=> 헤더에 넣나요? 바디에 넣나요?

@호텔천사 테마를 적용하셨으면 테마쪽 head.sub.php내 <body> 바로 아래에 넣으시면 될거같습니다.

감사합니다

감사합니다.

댓글을 작성하시려면 로그인이 필요합니다.

개발자팁

5,403건

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
PHP 24-06-30 조회 1,262
jQuery 24-06-19 조회 1,301
PHP 24-05-27 조회 1,727
Mobile 24-05-21 조회 1,411
기타 24-05-11 조회 1,246
23-10-30 조회 4,503
기타 23-10-24 조회 2,691
23-12-19 조회 1,695
24-01-10 조회 1,703
24-01-10 조회 1,704
24-01-15 조회 1,461
24-02-09 조회 5,117
24-02-16 조회 2,521
24-02-16 조회 4,221
24-02-18 조회 4,509
24-02-22 조회 3,294
24-02-25 조회 4,389
24-03-09 조회 3,079
JavaScript 24-02-26 조회 1,462
OS 24-02-25 조회 1,515
PHP 24-02-23 조회 1,669
PHP 24-02-18 조회 1,567
PHP 24-02-17 조회 1,469
PHP 24-02-16 조회 1,624
PHP 24-02-05 조회 1,628
JavaScript 24-01-28 조회 1,460
PHP 24-01-28 조회 1,427
PHP 24-01-27 조회 1,399
PHP 24-01-27 조회 2,634
PHP 24-01-27 조회 1,493