nav scroll

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 inverted-display">
			<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>
					</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="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 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 section</h5>
				<h6>Content section</h6>
				<p>Paragraph tag for multiple paragraphs.</p>

				<h1>Content section</h1>
				<h2>Content...

CSS

body {
        		background-color: #676767;
        	}
        	.nav-wrap {
	        	position: fixed;
	        	top: 0;
	        	background-color: rgba(255,255,255,1);
	        	border-bottom: 1px solid #e1e1e1;
	        	z-index: 10;     		
	        	height: 60px;
	        	width: 100%;
	        	box-shadow: 0 0 10px rgba(0,0,0,0.3);
				-webkit-transition: background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
				-moz-transition: background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
				-o-transition: background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
				transition: background-color 0.3s ease-in, color 0.3s ease-in, border 0.3s ease-in;
        	}
        	.nav-wrap .logo {
				background-image: url("http://www.carbonite.com/images/default-source/default-album/carbonite-logo-header.png?sfvrsn=0");
				-webkit-transition: background-image 0.3s ease-in;        		
				-moz-transition: background-image 0.3s ease-in;        		
				-o-transition: background-image 0.3s ease-in;        		
				transition: background-image 0.3s ease-in;        		
        	}

        	.nav-wrap.inverted-display {
        		background-color: rgba(0,0,0,0.2);
        		border-bottom: 1px solid transparent;
        	}
	        .nav-wrap.inverted-display .logo {
        		background: url("img/wht-logo.png");
	        }
	        .nav-wrap/*.inverted-display*/ .logo img {
	        	display: none;
	        }
	        .inverted-display .global-nav a {
	        	color: #fff;
	        }

	        .global-nav {
	        	width: 75%;
	        	margin: 0 auto;
	        	padding: 0;
	        }
	        .global-nav ul {
	        	list-style-type: none;
	        	margin: 0;
	        	padding: 0;
	        }
	        .global-nav > ul {
	        	float: left;
	        }
	        .global-nav li {
	        	float: left;
	        }
	        .global-nav a {
	        	padding: 20px 8px;
	        	float: left;
	        	color: #333;
	       ...

JavaScript

// Get the dimensions of the viewport
		    var width = $(window).width();
		    var height = $(window).height();
		    var contentOverlap = 60;
		    var navWrapHeight = $('.nav-wrap').height();

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

			function updateWindow() {
                SetContentShellTop();
			};

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

			SetContentShellTop();

			$('.content-shell').waypoint(function(up) {
				$('.nav-wrap').addClass('inverted-display');
			}, { offset: navWrapHeight });

			$('.content-shell').waypoint(function(down) {
				$('.nav-wrap').removeClass('inverted-display');
			}, { offset: navWrapHeight });