JSFiddle - React, Tailwind, and code Playground

by scobban

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/waypoints/2.0.3/waypoints.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
		<div class="nav-wrap">
			<nav class="global-nav clearfix">
				<ul class="drop-down">
					<li>
						<a href="#" class="logo">
							<img src="http://www.carbonite.com/images/default-source/default-album/carbonite-logo-header.png?sfvrsn=0" />
						</a>
					</li>
					<li>
						<a href="#">Learn</a>
						<div class="sub-level">
							<ul>
								<li>
									<a href="#">Sub 1</a>
								</li>
								<li>
									<a href="#">Sub 2</a>
								</li>
								<li>
									<a href="#">Sub 3</a>
								</li>
							</ul>
						</div>
					</li>
					<li>
						<a href="#">Products &amp; Pricing</a>
					</li>
					<li>
						<a href="#">At Work</a>
					</li>
					<li>
						<a href="#">Partnership</a>
					</li>
					<li>
						<a href="#">Support</a>
					</li>
				</ul>
				<ul class="support">
					<li>
						<a href="#" class="search">Search</a>
					</li>
					<li>
						<a a href="tel:+18772225488p22" class="phone">877-222-5488</a>
					</li>
				</ul>
				<ul class="access">
					<li>
						<a href="#" class="try">Try</a>
					</li>
					<li>
						<a href="#" class="buy">Buy</a>
					</li>
					<li>
						<a href="#" class="signin">Sign In</a>
					</li>
				</ul>
			</nav>
		</div>

		<div class="content-shell clearfix">

			<div class="sub-wrap">
				<nav class="sub-nav clearfix">
					<div class="counter">123,456 files backed up</div>
				</nav>
			</div>

			<div class="content">

				<h1>Content section</h1>
				<h2>Content section</h2>
				<h3>Content section</h3>
				<h4>Content section</h4>
				<h5>Content section</h5>
				<h6>Content section</h6>
				<p>Paragraph tag for multiple paragraphs.</p>

				<h1>Content section</h1>
				<h2>Content section</h2>
				<h3>Content section</h3>
				<h4>Content section</h4>
				<h5>Content...

CSS

/*
			purple = #603c98
			green = #5d7a40
        	*/
        	body {
        		background-color: #676767;
        	}
        	.nav-wrap {
	        	position: fixed;
	        	top: 0;
	        	background-color: rgba(255,0,0,1);
	        	z-index: 3;
        	}
        	.sub-wrap,
        	.nav-wrap {        		
	        	height: 60px;
	        	width: 100%;
        	}
	        .global-nav,
	        .sub-nav {
	        	width: 75%;
	        	margin: 0 auto;
	        	padding: 0;
	        	background-color: rgba(0,0,0,0.1);
	        }
	        .global-nav ul {
	        	list-style-type: none;
	        	margin: 0;
	        	padding: 0;
	        	float: left;
	        }
	        .global-nav li {
	        	float: left;
	        }
	        .global-nav a,
	        .sub-nav a {
	        	padding: 20px 8px;
	        	float: left;
	        	color: #fff;
	        	border-right: 1px solid #369;
	        	background
	        }
	        .global-nav .logo {
	        	padding: 0;
	        	margin: 15px 5px 0 0;
	        }

	        .sub-level {
	        	background-color: #999;
	        	position: absolute;
	        	top: 60px;
	        }
	        /*
	        .global-nav .drop-down {
	        	width: 64%;
	        }
	        .global-nav .support {
	        	width: 18%;
	        }
	        */
	        .global-nav .access,
	        .sub-nav .access {
	        	float: right;
	        /* width: 18%; */
	        	position: relative;
	        	z-index: 5;
	        }
			.global-nav .access a,
	        .sub-nav .access a {
	        	background-color: #603c98;	        	
	        }

	        .sub-wrap {
	        	background-color: rgba(0,0,255,0.2);
	        	height: 60px;	
	        }
	        .sub-nav ul {
	        	list-style-type: none;
	        	margin: 0;
	        	padding: 0;
	        }
	        .sub-nav li {
	        	float: left;
	        }
	        .sub-nav .counter {
	        	float: left;
	        	width: 81%;
	        }

	        .content-shell {
	        	position:...

JavaScript

$('.global-nav .access').clone().appendTo('.sub-nav');
			$('.global-nav .access').hide();
			$('.sub-nav .access').show();

		    // Get the dimensions of the viewport
		    var width = $(window).width();
		    var height = $(window).height();
		    var subNavHeight = 60;

			function SetContentShellTop() {
			    $(".content-shell").css('top', ($(window).height() - subNavHeight));
			};

			function updateWindow() {
                SetContentShellTop();
			};

			$(document).ready(updateWindow);    // When the page first loads
			$(window).resize(updateWindow);     // When the browser changes size

			SetContentShellTop();
			/*
			$('.content-shell').waypoint(function(down) {
				$('.sub-nav .access').removeClass('fixed-spot');
			});
			$('.content-shell').waypoint(function(up) {
				$('.sub-nav .access').addClass('fixed-spot');
			});
			*/

			$('.content-shell').waypoint(function(up) {
				$('.sub-nav .access').show();
				$('.global-nav .access').hide();
			});
			$('.content-shell').waypoint(function(down) {
				$('.sub-nav .access').hide();
				$('.global-nav .access').show();
			});