JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<body>$(document).ready( function() { $('.subMenu').smint({ 'scrollSpeed' : 500 }); });
<div class="wrap ">
	<div class="section sTop">
		<div class="inner">
			<h1 class="title">SMINT Demo Page</h1>
			<h2 class="subtitle">Feel free to use this as your starting template</h2>
		</div>
	</div>

	<div class="subMenu" >
	 	<div class="inner">
	 		<a href="#sTop" class="subNavBtn">Home</a>
	 		<a href="#s1" class="subNavBtn">Showreel</a> 
			<a href="#s2" class="subNavBtn">Work</a>
			<a href="#s3" class="subNavBtn">About</a>
			<a href="#s4" class="subNavBtn">Contact</a>
		</div>
	</div>

	<div class="section s1">
		<div class="inner ">
			<h1>Showreel</h1>
		</div>
	</div>

	<div class="section s2">
		<div class="inner">
			<h1>Work</h1>

			
			
			<div>
				<div>
					<h1>VFX</h1>
					<img style="width: 100%; display: block;" src="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" alt="" />
					<p>Personal 2D Artwork</p>
					<a href="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" <img style="width: 100%; display: block;" src="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" alt="" /></a>
				</div>
				<div>
					<h1>VFX</h1>
					<a href="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" <img style="width: 100%; display: block;" src="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" alt="" /></a>
					<a href="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" <img style="width: 100%; display: block;" src="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" alt="" /></a>
					<a href="http://a.abcnews.com/images/Lifestyle/ht_pudding_the_fox_03_mt_140821_16x9_992.jpg" <img style="width: 100%; display: block;"...

CSS

* {
margin: 0; padding: 0; outline: 0;
}
body {
	background:#2F3238;
}
h1, h2 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	margin:0 0 15px 0;
}
h1 {
	font-size: 36px;
	letter-spacing: -1px;
	line-height: 100%;
}
h2 {
	font-size: 24px;
}
p {
	margin: 0 0 15px 0;
}
a {
	color: #3e3e3e;
}


.clear {
	clear: both;
}
.wrap {
	width: 100%;
	min-width: 960px;
	z-index: 10;
	position: relative;
	margin: 0 auto;
	padding: 0;

}
.section {
	width: 100%;
	max-width: 1600px;
	min-width: 960px;
	z-index: 10;
	position: relative;
	margin: 0 auto;
	padding: 0 0 20px 0;
	min-height: 800px;
}
.inner {
	width: 960px;
	margin: 0 auto;
	position: relative;
	min-height: 50px;
	padding:30px 0;
	font-size: 18px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
}
.inner:after {
	  content: "";
	  display: table;
	  clear: both;
}
.subMenu {
	height: 50px;
	z-index: 1000;
	width: 100%;
	background-color: rgba(0,0,0,1);
}
.subMenu .inner {
	padding:0;
	font-weight: 400;
	margin: 0 auto;
}
.subNavBtn {
	display: block;
	height: 35px;
	width: 20%;
	float: left;
	margin: 0px 0px 0 0;
	text-decoration: none;
	font-size: 14px;
	padding: 15px 0 0 0;
	text-align: center;
	
	color: #fff;
}
.subMenu a:hover {
	background: #1783c7;
}
.active {
	background: #25aae1;
}
.end {
	margin: 0;
}




/* SECTIONS */
.sTop {
	min-height: 130px;
	background:#fff;
	color:#3d3d3d;
	padding: 50px 0;
	height: 300px;
	
}
.s1 {
	background:#184764;
	color:#fff;
}
.s2 {
	background: #313131;
}
.s3 {
	background: #1b83b3;
}
.s4 {
	background: #5aa3c4;
}
.footer {
	width: 100%;
	height: 70px;
	background: #D23838;
	border-top: 1px solid #26344D;	
}

JavaScript

/*

SMINT V1.0 by Robert McCracken
SMINT V2.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy)
SMINT V3.0 by robert McCracken with some awesome help from Ryan Clarke (@clarkieryan) and mcpacosy ‏(@mcpacosy)

SMINT is my first dabble into jQuery plugins!

http://www.outyear.co.uk/smint/

If you like Smint, or have suggestions on how it could be improved, send me a tweet @rabmyself

*/
	
		
$(document).ready( function() {
		
		
		
			$('.subMenu').smint({
				'scrollSpeed' : 500
			});
			
			
			
		});






(function(){


	$.fn.smint = function( options ) {

		var settings = $.extend({
			'scrollSpeed'  : 500,
			'mySelector'     : 'div'
		}, options);

		// adding a class to users div
		$(this).addClass('smint');


				
		
		//Set the variables needed
		var optionLocs = new Array(),
			lastScrollTop = 0,
			menuHeight = $(".smint").height(),
			smint = $('.smint'),
        	smintA = $('.smint a'),
        	myOffset = smint.height();

      



		if ( settings.scrollSpeed ) {
				var scrollSpeed = settings.scrollSpeed
			}

		if ( settings.mySelector ) {
				var mySelector = settings.mySelector
		};



		return smintA.each( function(index) {
            
			var id = $(this).attr('href').split('#')[1];

			if (!$(this).hasClass("extLink")) {
				$(this).attr('id', id);
			}

			
			//Fill the menu
			optionLocs.push(Array(
				$(mySelector+"."+id).position().top-menuHeight, 
				$(mySelector+"."+id).height()+$(mySelector+"."+id).position().top, id)
			);

			///////////////////////////////////

			// get initial top offset for the menu 
			var stickyTop = smint.offset().top;	

			// check position and make sticky if needed
			var stickyMenu = function(direction){

				// current distance top
				var scrollTop = $(window).scrollTop()+myOffset; 

				// if we scroll more than the navigation, change its position to fixed and add class 'fxd', otherwise change it back to absolute and remove the class
				if (scrollTop...