<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress Indicator on Scroll</title>
<style>
body, html { margin: 0; padding: 0; height: 300%; } /* 데모를 위한 높이 설정 */
.progressBar {
position: fixed;
top: 0;
left: 0;
height: 10px;
background-color: blueviolet;
width: 0%; /* 초기 너비 설정 */
}
</style>
</head>
<body>
<div class="progressBar"></div>
<script>
const progressBar = document.querySelector('.progressBar');
window.addEventListener('scroll', () => {
const totalHeight = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100;
progressBar.style.width = `${totalHeight}%`;
});
</script>
</body>
</html>
See the Pen Progress Indicator on Scroll by gaae (@gaae) on CodePen.
'JavaScript &jQuery' 카테고리의 다른 글
| [JavaScript] 웹페이지 scroll이벤트 (0) | 2024.04.25 |
|---|---|
| [JavaScript] style.setProperty() (0) | 2024.04.19 |
| [JavaScript] 스크롤 위치 높이 (0) | 2024.04.19 |
| [jQuery]'data-'속성으로 버튼 만들기 (0) | 2021.07.14 |
