JSFiddle - React, Tailwind, and code Playground

by dauruk0512

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<body>
<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">Section 1</a> 
			<a href="#s2" class="subNavBtn">Section 2</a>
			<a href="#s3" class="subNavBtn">Section 3</a>
			<a href="1.html" class="subNavBtn">Section 4</a>
			<a href="#s5" class="subNavBtn">Section 5</a>
			<a href="https://twitter.com/rabmyself" class="subNavBtn extLink end">External Link</a>
		</div>
	</div>

	<div class="section s1">
		<div class="inner ">
			<h1>Section 1</h1>
		</div>
	</div>

	<div class="section s2">
		<div class="inner">
			<h1>Section 2</h1>
			<p><a href="#s4" class="intLink">Internal Link: Jump to Section 4</a></p>
			<p><a href="#sTop" class="intLink">Internal Link: Back to Top</a></p>
		</div>
	</div>



	<div class="section s3">
		<div class="inner">
			<h1>Section 3</h1>
		</div>
	</div>

	<div class="section s4">
		<div class="inner">
			<h1>Section 4</h1>
		</div>
	</div>

	<div class="section s5">
		<div class="inner">
			<h1>Section 5</h1>
		</div>
	</div>

	
</div>

</body>

CSS

* {margin: 0; padding: 0; outline: 0;}


body {
	font-family: Helvetica, Arial, Verdana, sans-serif;
	color: #e5e5e5;
	font-size: 12px;
	background:#bfbfbf;

	
}


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%;
	max-width: 1600px;
	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;
	height: 500px;
}


.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: #0977bc;
}

.subMenu .inner {
	padding:0;
	font-weight: 400;
	margin: 0 auto;
}


.subNavBtn {
	display: block;
	height: 35px;
	width: 10%;
	float: left;
	margin: 0px 0px 0 0;
	text-decoration: none;
	font-size: 14px;
	padding: 15px 2% 0 2%;
	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;
}
.s2 a {
	color: #fff;
}

.s3 {
	background: #1b83b3;
}


.s4 {
	background: #5aa3c4;
}



.s5 {
	background: #bce1f1;
	color: #3d3d3d;
}

.s6 {
	background: #161616;
}

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

*/


(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 > stickyTop+myOffset) { 
					smint.css({ 'position': 'fixed', 'top':0,'left':0 }).addClass('fxd');

					// add padding to...