본문의 상단에 진행상태를 표시해주는 상태표시바를 만드는 소스입니다.
<div class="header">
<h2>Scroll Indicator</h2>
<div class="progress-container">
<div class="progress-bar" id="myBar"></div>
</div>
</div>
<div class="content">
<p>
본문내용....
</p>
</div>
body {
margin: 0;
font-size: 28px;
}
.header {
position: fixed;
top: 0;
z-index: 1;
width: 100%;
background-color: #f1f1f1;
}
.header h2 {
text-align: center;
}
.progress-container {
width: 100%;
height: 8px;
background: #ccc;
}
.progress-bar {
height: 8px;
background: #4caf50;
width: 0%;
transition:all .3s ease;
}
.content {
padding: 100px 0;
margin: 50px auto 0 auto;
width: 80%;
}
$(window).scroll(function() {
var wins = $(this).scrollTop();
var hei = $('.content').outerHeight(); //전체 페이지 높이
var hei2 = $(window).outerHeight(); //윈도우의 높이
var height = hei - hei2;
var bar = (wins / height) * 100;
$('#myBar').css('width', bar + '%');
});