• HTML
  • CSS
  • JS
  • J볃교

스크롤 위치(본문내용의 맨밑)에 도달할때까지의 현황바 나타내는 소스

2019-07-08 619

설명

  • 카카오톡 링크

스크롤 위치(본문내용의 맨밑)에 도달할때까지의 현황바 나타내는 소스입니다.

※본문 내용을 스크롤 하여 맨위에 있는 검은색 줄을 확인해 주세요.

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.header_line {position:fixed; left:0; top:0; height:5px; background:#404040; z-index:10000; -moz-transition: width 0.1s ease;  -webkit-transition: width 0.1s ease; -ms-transition: width 0.1s ease;  transition: width 0.1s ease; }
	#header {padding-top:5px;}
</style>

<div class="header_line">
</div>

<p>
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
	텍스트입니다.<br />
</p>

<script type="text/javascript">
	var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
	$('.header_line').css('width', scrollPercent +"%"  );
	$(window).scroll(function() {
		var scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
		$('.header_line').css('width', scrollPercent +"%"  );
	});
</script>