0330

by Kye Sooryun

HTML

<div id="wrap">
			<ul class="menu">
				<li class="menu01 on"><a href="#">menu1</a></li>
				<li class="menu02"><a href="#">menu2</a></li>
				<li class="menu03"><a href="#">menu3</a></li>
				<li class="menu04"><a href="#">menu4</a></li>
			</ul>
			<div class="scroll_inner">
				<div class="scroll01">1</div>
				<div class="scroll02">2</div>
				<div class="scroll03">3</div>
				<div class="scroll04">4</div>
			</div>
			<div id="circle">&nbsp;</div>
			<p class="bar"><span>&nbsp;</span></p>
		</div>

CSS

html, body {width:100%;height:100%;}
/* reset */
html, body {width:100%; height:100%; -webkit-font-smoothing:antialiased}
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, button, address, em, img, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td, hr, blockquote {margin:0; padding:0}
body {padding:0; background:#fff; font-family:'YouandiModernTR', 'YouandiModernTB', 'YouandiModernHEB', dotum, '돋움', gulim, '굴림', Arial, AppleGothic, verdana, sans-serif, helvetica; font-size:15px; color:#000;}
h1, h2, h3, h4, h5, h6 {font-weight:normal}
ol, ul, li {list-style:none}
table {width:100%; border-collapse:collapse; border-spacing:0}
form, fieldset, iframe {display:block; border:0}
img, button {border:0 none; vertical-align:middle}
hr {height:0; display:none}
i, em, address {font-style:normal}
label, button {cursor:pointer}
caption, legend {width:0; height:0; margin:0; padding:0; text-indent:-9999em; overflow:hidden; font-size:0;} 
.blind {position:absolute !important; left:-9999em; width:0; height:0; margin:0; padding:0; text-indent:-9999em; overflow:hidden; font-size:0; line-height:0;}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
input, textarea, select {margin:0; padding:0; font-family:'YouandiModernTR', 'YouandiModernHEB', dotum,'돋움',gulim,'굴림',Arial, AppleGothic, verdana, sans-serif, helvetica; font-size:10.5pt; color:#555; vertical-align:middle}
textarea {border: 1px solid #666; resize:none}
button {overflow:visible; margin:0; padding:0; border:0 none; background:none; font-size:0; font-family:'YouandiModernTR', 'YouandiModernHEB', dotum,'돋움',gulim,'굴림',Arial, AppleGothic, verdana, sans-serif, helvetica; vertical-align:top; cursor:pointer;}
button::-moz-focus-inner {border:0; padding:0;}
.ellipsis {display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
a {color:#000; text-decoration:none;...

JavaScript

$(document).ready(function() {
		window.onload = scroll();
		window.onresize = scroll();
		var _arr = [],
			box = $('#wrap .scroll_inner div');
			
		box.each(function (){
			_arr.push($(this).offset().top);
		});

		var _circleTop = $('#circle').offset().top,
			_circleLeft = $('#circle').offset().left;

		$(window).scroll(function (){
			var _scroll = $(window).scrollTop(),
				bar = ($(window).scrollTop() / ($(document).outerHeight() - $(window).height())) * 100,
				_top = ($(window).scrollTop()) * 100 / $(window).height() + 100,
				num = 0;

			$('.bar span').css({'width':bar+'%'});

			if(_scroll >= _arr[0]&&_scroll < _arr[1]) {
				num=0;
				$('#circle').css({'left':(_circleLeft + _scroll)*1.3})
			}
			if(_scroll >= _arr[1]&&_scroll < _arr[2]) {
				num=1;
				var leftNum = parseInt($('#circle').css('left'));

				$('#circle').css({
					'left': leftNum,
					'top': _top
				})
			}

			if(_scroll >= _arr[2]&&_scroll < _arr[3]) {
				num=2;
			}
			if(_scroll >= _arr[3]) {
				num=3;
			}

			$('.menu li').eq(num).addClass('on').siblings().removeClass('on');
		});
	  
		$('.menu li').each(function(i){
			$(this).attr('data-idx', i);
		}).click(function (){
			$('html, body').animate({scrollTop:_arr[$(this).attr('data-idx')]});
		});
	});