간단한 스크롤 진행률 표시기 구현하기 정보
간단한 스크롤 진행률 표시기 구현하기
본문
<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에 업로드 하셔서 사용 하시면 됩니다.
추천
5
5
댓글 4개
안녕하세요.
head.sub.php에 업로드 하셔서 사용 하시면 됩니다.
=> 테마에 있는 파일인가요? 아니면 루트에 있는 파일인가요?
=> 헤더에 넣나요? 바디에 넣나요?
@호텔천사 테마를 적용하셨으면 테마쪽 head.sub.php내 <body> 바로 아래에 넣으시면 될거같습니다.
감사합니다
감사합니다.