JSFiddle - React, Tailwind, and code Playground

by Park Mino

HTML

<div class="wrap">
	<div class="scrollBox on" id="scrollBox01">1</div>
	<div class="scrollBox" id="scrollBox02">2</div>
	<div class="scrollBox" id="scrollBox03">3</div>
	<div class="scrollBox" id="scrollBox04">4</div>


	<ul class="menu">
		<!-- <li><a href="#scrollBox01">menu1</a></li>
		<li><a href="#scrollBox02">menu2</a></li>
		<li><a href="#scrollBox03">menu3</a></li>
		<li><a href="#scrollBox04">menu4</a></li> -->
		<li class="on"><a href="#none">menu1</a></li>
		<li><a href="#none">menu2</a></li>
		<li><a href="#none">menu3</a></li>
		<li><a href="#none">menu4</a></li>
	</ul>
  <p class="btmLine"><span>&nbsp;</span></p>p>
</div>

CSS

*{margin:0;padding:0;list-style:none;}
html,body{height:100%;font-size:14px/1.5}
.wrap{height:100%;}
.menu{position:fixed;top:30px;left:30px;}
.menu li.on a{font-weight:bold;color:#fff;}
.btmLine{position:fixed;left:0;top:0;width:100%;height:10px;background:#999;}
.btmLine span{display:block;width:0%;height:10px;background:#000;}

.wrap div:nth-child(1){background:#ffcc00}
.wrap div:nth-child(2){background:#0066cc}
.wrap div:nth-child(3){background:#cc3366}
.wrap div:nth-child(4){background:#66cc66}
.scrollBox{font-size:50px;color:#fff;text-align:center;}
.scrollBox.on{font-size:100px;color:#000;}

JavaScript

$(document).ready(function(){
	$(window).resize(function(){
		 boxSet();
	}).resize();
	boxSet();
	var b_spd = 500;

	function boxSet(){
		var $w_win = $(window).width(),
			$h_win = $(window).height();
		$('.scrollBox').css({
			'width' : $w_win + 'px',
			'height' : $h_win + 17 + 'px',
		});
	}

	$(window).on('scroll', function(){
		var $h_doc = $(document).height(),
			$w_win = $(window).width(),
			$h_win = $(window).height(),		
			$h_scroll = $(this).scrollTop(),
			$end_scroll = $h_doc - $h_win;
			$w_btmLine = ($h_scroll/$end_scroll)*100 + '%', 
			$btmLine = $('p.btmLine span');
		
		$btmLine.css('width', $w_btmLine);
		$('.scrollBox').each(function(i){
			if($h_scroll>=i*$h_win&&$h_scroll<(i+1)*$h_win){
				$('.menu li').removeClass('on');
				$('.menu li').eq(i).addClass('on');
				$('.scrollBox').removeClass('on');				
				$('.scrollBox').eq(i).addClass('on');
			}
		});		
	});

	
	$('.menu li').on('click', function(){
		var link = $(this).index();
		//$('body').stop().animate({scrollTop:$(this.hash).offset().top}, b_spd);
		$('html, body').stop().animate({scrollTop:$('.scrollBox').eq(link).offset().top}, b_spd);
	});	
});