index.html
<body>
<div class="progress">
<div class="bar"></div>
</div>
<section>
<h1>Section 1</h1>
</section>
<section>
<h1>Section 2</h1>
</section>
<section>
<h1>Section 3</h1>
</section>
<section>
<h1>Section 4</h1>
</section>
<script src="app.js"></script>
</body>style.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
width: 100%;
font-family: sans-serif;
}
section{
display:flex;
align-items: center;
justify-content: center;
width:100%;
height: 100vh;
color:#222;
background:#fff;
}
section:nth-child(even){
background:#eee;
}
.progress{
position:fixed;
z-index:999;
width:100%;
height: 6px;
background:#eee;
}
.bar{
width: 0;
display: block;
height: inherit;
background:#222;
}app.js
const updateBar = () => {
const body = document.querySelector('body');
const bar = document.querySelector('.bar');
const scrollPos = (window.scrollY / (body.scrollHeight - window.innerHeight)) * 100;
bar.style.width = scrollPos + '%';
requestAnimationFrame(updateBar);
}
updateBar();
프론트엔드