스크롤 상태 표시바 만들기

본문의 상단에 진행상태를 표시해주는 상태표시바를 만드는 소스입니다.

  <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 + '%');

});

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/3sgc78aq/2/