Sticky Nav-Bar Test

by Shadowfang

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<body>
	<!-- It would be nice to know if tables are what's throwing off my entire website or not... but whatever. -->
	<div class="status"></div>
	<div class="container"><!--I'll change the word "container" to Logo perhaps in the future here if I can get this example to work for once. Also let it be noted that I am in fact not using the "header" tag at any portion during this... which is bothersome. -->			
		<center><a href="http://www.wolvesofthedust.com/"><img src="http://i1288.photobucket.com/albums/b494/ShadowfangInnovia/WolvesoftheDustSiteHeader_zpsdddba823.png" height="auto" width="940" border="0" alt=" photo WolvesoftheDustSiteHeader_zpsdddba823.png"/></a></center>
			
		<!-- The navigation portion... dear God... here is where it all usually goes wrong. -->
		<nav>
			<ul class="clearfix"> <!-- Clearfix?! Really?! I'm ASSUREDLY changing that one. -->
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
				<li><a href="#">Link 3</a></li>
				<li><a href="#">Link 4</a></li>
				<li><a href="#">Link 5</a></li>
				<li><a href="#">Link 6</a></li>
				<li><a href="#">Link 7</a></li>
				<li><a href="#">Link 8</a></li>
				<li><a href="#">Link 9</a></li>
			</ul>
		</nav><!-- End the hiddeously named section... and hopefully begin progress towards a complete page... -->
		
		<br/><br/>
		<center><h2>THIS WEBSITE IS UNDER CONSTRUCTION!!! TAKE NOTHING HERE YOU SEE SERIOUSLY FOR THE TIME BEING!!!</h2></center> <!-- This is where I will likely have the table located with nicely written dialogue... but if the table isn't needed above then I may as well continue this practice elsewhere. Did I learn all about tables and arranging code properly for nothing? -->
		<br/>
		<br/>
		<p><!-- Interestingly enough it took me a while to realize that P stood for paragraph... considering people normally only wrote a single sentance per line with a "p" tag. Stupid examples and my insinuations...

CSS

html {
	padding: 0;
	margin: 0;
	background-color: #000;
}

body {
	font-family: Helvetica, sans-serif;
	font-size: 93%;
	line-height: 1.5em;
	padding: 40px 0;
	margin: 0;
	color: #7d0000;
}

a,
a:link,
a:visited {
	color: blue;
}

h1, h2, h3, h4, h5, h6 {margin-top: 0;}

p {margin: 0 0 1em 0;}

.container {
	max-width: 100%;
	margin: 0 auto;
	padding: 0 20px;
	position: relative;
}

h1 {
	background-color: #305782;
	color: #FFF;
	padding: 60px 25px;
	margin: 0;
}

nav {
	z-index: 500;
	background-color: #000;
}

.nav-placeholder {
	margin: 0 0 40px 0;
}

.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #000;
}

.fixed .nav-inner {
	padding: 0 20px;
}

.fixed .nav-inner-most {
	max-width: 100%;
	margin: 0 auto;
	background-color: #000;
}

nav ul {
display: table;
width: 100%;
list-style: none;
}

nav ul li {
display: table-cell;
text-align: center;
}

nav ul li a:link,
nav ul li a:visited {
	display: block;
	text-decoration: none;
	padding: 10px 25px;
	background-color: #000;
	border: 2px solid #7d0000;
	color: #7d0000;
	font-size: 90%;
	font-weight: bold;
}

nav ul li a:hover {
	background-color: #28bfa1;
	color: #FFF
}

/* This seems to have an undesired effect, but may be necessary for later.
   The border-right: none; attribute is especially annoying...

nav ul li:last-child a:link,
nav ul li:last-child a:visited {
	border-right: none;
}

*/

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JavaScript

jQuery(document).ready(function() {
	
	// define variables
	var navOffset, scrollPos = 0;
	
	// add utility wrapper elements for positioning
	jQuery("nav").wrap('<div class="nav-placeholder"></div>');
	jQuery("nav").wrapInner('<div class="nav-inner"></div>');
	jQuery(".nav-inner").wrapInner('<div class="nav-inner-most"></div>');
	
	// function to run on page load and window resize
	function stickyUtility() {
		
		// only update navOffset if it is not currently using fixed position
		if (!jQuery("nav").hasClass("fixed")) {
			navOffset = jQuery("nav").offset().top;
		}
		
		// apply matching height to nav wrapper div to avoid awkward content jumps
		jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
		
	} // end stickyUtility function
	
	// run on page load
	stickyUtility();
	
	// run on window resize
	jQuery(window).resize(function() {
		stickyUtility();
	});
	
	// run on scroll event
	jQuery(window).scroll(function() {
		
		scrollPos = jQuery(window).scrollTop();
		
		if (scrollPos >= navOffset) {
			jQuery("nav").addClass("fixed");
		} else {
			jQuery("nav").removeClass("fixed");
		}
		
	});
	
});