HTML - CSS - 웹표준
[CSS] scroll progress bar (html/css/js)
lupinmom
2023. 1. 9. 14:31
<style>
html {
width: 100%;
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #F1F1F1;
}
.progress-container {
width: 100%;
height: 8px;
background: #CCCCCC;
}
.progress-container .progress-bar {
width: 0;
height: 8px;
background: #4CAF50;
}
.content_obj {
width: 100%;
height: 5000px;
background-color: #eeeeee;
}
</style>
<div class="header">
<div class="progress-container">
<div class="progress-bar"></div>
</div>
</div>
<div class="content_obj"></div>
<script>
window.onscroll = function () {
progressBar()
};
function progressBar() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementsByClassName("progress-bar")[0].style.width = scrolled + "%";
}
</script>
반응형