간단한 스크롤 진행률 표시기 구현하기
<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개
1년 전
안녕하세요.
head.sub.php에 업로드 하셔서 사용 하시면 됩니다.
=> 테마에 있는 파일인가요? 아니면 루트에 있는 파일인가요?
=> 헤더에 넣나요? 바디에 넣나요?
1년 전
@호텔천사 테마를 적용하셨으면 테마쪽 head.sub.php내 <body> 바로 아래에 넣으시면 될거같습니다.
1년 전
감사합니다
1년 전
감사합니다.
게시판 목록
개발자팁
개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.
질문은 QA에서 해주시기 바랍니다.
| 번호 | 분류 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|---|
| 5066 | 기타 |
DogFoot개발
|
4년 전 | 1818 | |
| 5065 | PHP |
DogFoot개발
|
4년 전 | 1528 | |
| 5064 | PHP |
happyl
|
4년 전 | 1916 | |
| 5063 | node.js |
DogFoot개발
|
4년 전 | 1674 | |
| 5062 | node.js |
DogFoot개발
|
4년 전 | 1691 | |
| 5061 | node.js |
DogFoot개발
|
4년 전 | 1414 | |
| 5060 | node.js |
DogFoot개발
|
4년 전 | 1254 | |
| 5059 | node.js |
DogFoot개발
|
4년 전 | 1249 | |
| 5058 | 기타 |
DogFoot개발
|
4년 전 | 2697 | |
| 5057 | 웹서버 |
DogFoot개발
|
4년 전 | 2726 | |
| 5056 | MySQL | 4년 전 | 1504 | ||
| 5055 | 기타 | 4년 전 | 1435 | ||
| 5054 | OS | 4년 전 | 2069 | ||
| 5053 | 웹서버 | 4년 전 | 3631 | ||
| 5052 | OS | 4년 전 | 2423 | ||
| 5051 | PHP | 4년 전 | 2187 | ||
| 5050 | 웹서버 | 4년 전 | 1718 | ||
| 5049 | MySQL | 4년 전 | 1898 | ||
| 5048 | OS | 4년 전 | 2702 | ||
| 5047 | PHP | 4년 전 | 4373 | ||
| 5046 | MySQL | 4년 전 | 1819 | ||
| 5045 | MySQL | 4년 전 | 1943 | ||
| 5044 | MySQL | 4년 전 | 4133 | ||
| 5043 | MySQL | 4년 전 | 1890 | ||
| 5042 | 기타 |
 Innisfree |
4년 전 | 2635 | |
| 5041 | MySQL | 4년 전 | 1998 | ||
| 5040 | MySQL | 4년 전 | 1724 | ||
| 5039 | MySQL | 4년 전 | 1497 | ||
| 5038 | MySQL | 4년 전 | 1336 | ||
| 5037 | OS | 4년 전 | 4432 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기