JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<nav id="navigation">
		<a href="#home">Home</a>
		<a href="#section-1">Section 1</a>
		<a href="#section-2">Section 2</a>
</nav>
<div id="site">
	
	<div id="content">
		<section id="home">
			<div class="section-content">
				<p>Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
				<p>Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
				<p>Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
				<p>Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
				<p>Sed posuere consectetur est at lobortis. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor...

CSS

@import url(http://fonts.googleapis.com/css?family=Tinos:400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

body {
	margin: 0;
	padding: 0;
	font: 120%/1.5 'Tinos', serif;
}

#site {
	width: 100%;
	position: relative;
	transition: all 800ms ease-in;
	top: 0;
}

#navigation {
	width: 100%;
	height: 54px;
	background: #000;
	color: #fff;
	text-align: center;
	position: fixed;
	top: 0;
	left: 0;
	line-height: 54px;
	font-family: 'Oswald', sans-serif;
	z-index: 100000;
}

#navigation a {
	padding-left: 1em;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
}

#content {
	width: 100%;
	margin-top: 80px;
}

section {
	width: 100%;
	background: #fff;
	position: relative;
}

section:nth-child(even) {
	background: #eee;
}

.section-content {
	margin: 1em auto;
	max-width: 900px;
	padding: 1.5em 1em;
}

JavaScript

(function() {
	function Parallax( element ) {
		this.element = document.querySelector( element );

		this.init();
		this.navigate();
	}

	Parallax.prototype = {
		init: function() {
			this.navItems = document.querySelectorAll( "#navigation a" );
		},
		navigate: function() {
			var self = this;
			var items = self.navItems;

			for( var i = 0; i < items.length; ++i ) {
				var item = items[i];
				item.addEventListener( "click", function( e ) {
					e.preventDefault();
					var targetExpr = this.getAttribute( "href" );
					var target = document.querySelector( targetExpr );
					self._gotoSection( target );
				}, false);
			}

		},
		_gotoSection: function( element ) {
			var top = element.offsetTop,
				y = 0;
			if( top !== 0 ) {
				y = top - element.scrollTop - 80;
				this.element.style.top = "-" + y + "px";
			} else {
				this.element.style.top = y + "px";
			}
			
		}
	};

	document.addEventListener( "DOMContentLoaded", function() {
		var paral = new Parallax( "#site" );

	});

})();