[Jquery] 스크롤 진행상황을 알려주는 막대(bar)만들기

 

스크롤을 위아래 할 때마다 진행상황을 알려주는 막대(Bar)는 게시글을 읽을 때 편리하다.

 

<PC버전 - 빨간 막대가 스크롤을 내리고 올릴 때마다 진행상황에 맞게 너비가 변화된다.>

 

이 막대(Bar)는 jquery로 하는 것이여서 PC는 물론 모바일에서도 사용가능하다.

 

 

<모바일 버전 - 역시 빨간 막대의 너비가 스크롤 진행상황을 나타내주고 있다.>

.

 

 

이 스크롤진행막대(Scroll Progress Bar) 구현방법은 다음과 같다.

 

0. 전제조건 (jquery문법을 사용할 수 있게 만들기)

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

 

 

1. css

.scroll-line {
    height: 10px;
    margin-bottom: -2px;
    background: #ff000073;
    width: 0%;
}

 

2. html

<div class="scroll-line"></div>
<!--적당한 위치에 위 태그를 넣어준다.-->

 

3. js

$(window).scroll(function() {
	var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
	var scrolled = (wintop/(docheight-winheight)) * 100;
	$('.scroll-line').css('width', (scrolled + '%'));
 });