JSFiddle - React, Tailwind, and code Playground

Today I Ate The World

by Jennifer Perrin

HTML

<nav id="section-menu">
  <ul></ul>
</nav>
<section id="section-one" class="section scroll-item" title="One">
  <div class="inner">
    <h2>Today</h2>
  </div>
</section>
<section id="section-two" class="section scroll-item" title="Two">
  <div class="inner">
    <h2>I</h2>
  </div>
</section>
<section id="section-three" class="section scroll-item" title="Three">
  <div class="inner">
    <h2>ate</h2>
  </div>
</section>
<section id="section-four" class="section scroll-item" title="Four">
  <div class="inner">
    <h2>the</h2>
  </div>
</section>
<section id="section-five" class="section scroll-item" title="Five">
  <div class="inner">
    <h2>world</h2>
  </div>
</section>

CSS

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	font-family: Helvetica, sans-serif;
	vertical-align: baseline;
}


h2 {
	font-weight: 100;
	font-size: 10em;
	line-height: 1em;
	text-transform: uppercase;
	text-align: center;
	margin: 0;
	padding: 0;
	color: #fff;
}


.inner {
	width: 62.5%;
	margin: 0 auto;
	padding-top: 20%;
}


/* ==========================================================================
   Sections
   ========================================================================== */

.section {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	height: 400px;
}
#section-one {
	background: #73d2e5;
}
#section-two {
	background: #57b8d9;
}
#section-three {
	background: #3d9ccc;
}
#section-four {
	background: #2680bf;
}
#section-five {
	background: #1262b2;
}


/* ==========================================================================
   Section Navigation
   ========================================================================== */

#section-menu {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 3000;
	text-transform: uppercase;

	-webkit-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
#section-menu.freeze {
	right: -112px;
}
.touch #section-menu {
	display: none;
}
#section-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#section-menu li {}
#section-menu a {
	float: right;
	clear: both;

	display: block;
	height: 2em;
	line-height: 2em;
	text-decoration: none;
	padding: 0 8px;
	background: rgba(0,0,0,0.5);
	color: #fff;
	white-space: nowrap;

	-webkit-transition: all ease 0.1s;
	transition: all ease 0.1s;
}
#section-menu.freeze a {
	float: none;
	width: 128px;
}
#section-menu a:hover,
#section-menu a:focus {
	background: rgba(0,0,0,0.75);
	font-size: 1.2em;
}
#section-menu a span {
	display: none;
	font-weight: 700;
	position: relative;
	width: 32px;
	left: -8px;
	text-align: center;
	background: rgba(0,0,0,0.1);
}
#section-menu a.active {
	background: #000;
	font-size:...

JavaScript

jQuery(function($) {

	var html = $('html');
	var viewport = $(window);
	var viewportHeight = viewport.height();


	var scrollMenu = $('#section-menu');
	var timeout = null;

	function menuFreeze() {
		if (timeout !== null) {
			scrollMenu.removeClass('freeze');
			clearTimeout(timeout);
		}
		
		timeout = setTimeout(function() {
			scrollMenu.addClass('freeze');
		}, 2000);
	}
	scrollMenu.mouseover(menuFreeze);


	/* ==========================================================================
	   Build the Scroll Menu based on Sections .scroll-item
	   ========================================================================== */

	var sectionsHeight = {}, viewportheight, i = 0;
	var scrollItem = $('.scroll-item');
	var bannerHeight;

	function sectionListen() {
		viewportHeight = viewport.height();
		bannerHeight = (viewportHeight);
		$('.section').addClass('resize').css('height', bannerHeight);
		scrollItem.each(function(){
			sectionsHeight[this.title] = $(this).offset().top;
		});
	}
	sectionListen();
	viewport.resize(sectionListen);
	viewport.bind('orientationchange', function() {
		sectionListen();
	});
	
	var count = 0;

	scrollItem.each(function(){
		var anchor = $(this).attr('id');
		var title = $(this).attr('title');
		count ++;
		$('#section-menu ul').append('<li><a id="nav_' + title + '" href="#' + anchor + '"><span>' + count + '</span> ' + title + '</a></li>');
	});
	function menuListen() {
		var pos = $(this).scrollTop();
		pos = pos + viewportHeight * 0.625;
		for(i in sectionsHeight){
			if(sectionsHeight[i] < pos) {
				$('#section-menu a').removeClass('active');
				$('#section-menu a#nav_' + i).addClass('active');;
				var newHash = '#' + $('.scroll-item[title="' + i + '"]').attr('id');
				if(history.pushState) {
				    history.pushState(null, null, newHash);
				} else {
				    location.hash = newHash;
				}
			} else {
				$('#section-menu a#nav_' + i).removeClass('active');
				if (pos < viewportHeight - 72) {
					history.pushState(null,...