diff --git a/css/style.css b/css/style.css
index fbd5ec7..d35605a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -305,6 +305,10 @@ section, header {
     padding: .1em 0 0 0;
 }
 
+
+/* Nav Sticky */
+.sticky { position: fixed; top: 0; left: 0; z-index: 2; }
+
 section ul, section ol { 
     margin-left: 25px;
 }
@@ -404,7 +408,11 @@ li span { opacity: 0;
 }
 li:hover span { opacity: 1;}
 
-nav { text-align: center; }
+nav { 
+  text-align: center; 
+  background: -o-linear-gradient(rgba(50, 74, 105, 0.8), rgba(50, 74, 105, 1));      
+  width: 100%;
+}
 
 nav ul,
 nav ol {
@@ -416,9 +424,16 @@ nav ol {
 nav li {
     display: table-cell;
     padding: .5em 0 .8em 0;
-    *display: inline;
+    *display: inline;    
 }
 
+nav a, nav a:visited { color: rgb(231, 235, 241); text-shadow: 0 1px #000; }
+
+nav a:active, nav a.active { color: rgb(181, 197, 215); }
+
+
+nav li:not(:last-child) { border-bottom: 0; }
+
 .col-ab {
     clear: both;
     padding: 0 2.9296875%;
diff --git a/index.html b/index.html
index a8a4369..a2408e9 100644
--- a/index.html
+++ b/index.html
@@ -21,14 +21,21 @@
             <h1 class="hed-lead">Move the Web Forward</h1>
             <h2 class="subhed-lead">wear a beanie today, build the web tomorrow</h2>
             <p>You love web standards. You want to give back to the community. Curious about where to start? <b>We're here to help.</b></p>
-        </div>
+        </div>        
         <div class="col-split">
             <p>Whether you're just diving into web development, or you’ve been web-slinging since the days of tables and <code>font</code> tags, there are a number ways for you to give back. Below, we list some of the ways that anyone can contribute back to the web platform. </p><p>Our goal is to make it easy for anyone to get started contributing to the platform, whether that's learning more how it works, teaching others, or writing specs. The web has grown due to people like you, and we want to make it even easier for people like you to give back.</p>
         </div>
     </header>
+    <nav id=toc>
+      <ul>
+        <li><a href=#levelup>A New Beginning</a></li>
+        <li><a href=#moadvanced>Mid-life crisis</a></li>
+        <li><a href=#virtuoso>Enlightenment</a></li>
+      </ul>
+    </nav>
 
     <article class="section">
-        <div class="standout">
+        <div class="standout" id=levelup>
             <h1 class="hed">Level up!</h1>
             <h2 class="subhed">You're damn good at what you do. Let's dive into the community!</h2>
         </div>
@@ -143,7 +150,7 @@ <h2 class="subhed">A helping hand.</h2>
     </article>
 
     <article class="section">
-        <div class="standout">
+        <div class="standout" id=moadvanced>
             <h1 class="hed">Mo’ Advanced</h1>
             <h2 class="subhed">Are you a ninja? Dare to know what you can do beyond these?</h2>
         </div>
@@ -330,7 +337,7 @@ <h2 class="subhed">Stop bugging out!</h2>
         </section>
     </article>
     <article class="section">
-      <div class="standout">
+      <div class="standout" id=virtuoso>
         <h1 class="hed">Virtuoso!</h1>
         <h2 class="subhed">You are the expert and you are bored with all these suggestions? May we suggest you these?</h2>
       </div>
diff --git a/js/init.js b/js/init.js
index 0f15814..5559f71 100644
--- a/js/init.js
+++ b/js/init.js
@@ -11,4 +11,90 @@
 			searchPrefix    : '(ivegotmybluebeanieonnowwhat.com OR movethewebforward.com) AND '
 		});
 
+		var $toc = $('#toc'),
+			$tocLinks = $toc.find('a'),
+			cache = {};
+			$docEl = $( document.documentElement ),
+			$body = $( document.body ),
+			$window = $( window ),
+			$scrollable = $body; // default scrollable thingy, which'll be body or docEl (html)	
+			
+		// find out what the hell to scroll ( html or body )
+		// its like we can already tell - spooky
+		if ( $docEl.scrollTop() ) {
+			$scrollable = $docEl;
+		} else {
+			var bodyST = $body.scrollTop();
+			// if scrolling the body doesn't do anything
+			if ( $body.scrollTop( bodyST + 1 ).scrollTop() == bodyST) {
+				$scrollable = $docEl;
+			} else {
+				// we actually scrolled, so, er, undo it
+				$body.scrollTop( bodyST - 1 );
+			}
+		}		
+
+		// build cache
+		$tocLinks.each(function(i,v) {
+			var href =  $( this ).attr( 'href' ),
+				$target = $( href );
+			if ( $target.length ) {
+				cache[ this.href ] = { link: $(v), target: $target };
+			}
+		});
+
+		// handle nav links
+		$toc.delegate( 'a', 'click', function(e) {
+		//	alert( $scrollable.scrollTop() );
+			e.preventDefault(); // if you expected return false, *sigh*
+			if ( cache[ this.href ] && cache[ this.href ].target ) {
+				$scrollable.animate( { scrollTop: cache[ this.href ].target.position().top }, 600, 'swing' );
+			}
+		});
+
+		// auto highlight nav links depending on doc position
+		var deferred = false,
+			timeout = false, // so gonna clear this later, you have NO idea
+			last = false, // makes sure the previous link gets un-activated
+			check = function() {
+				var scroll = $scrollable.scrollTop(),
+					height = $body.height(),
+					tolerance = $window.height() * ( scroll / height );
+
+				$.each( cache, function( i, v ) {
+					// if we're past the link's section, activate it
+					if ( scroll + tolerance >  v.target.position().top  ) {
+						last && last.removeClass('active');
+						last = v.link.addClass('active');
+					} else {
+						v.link.removeClass('active');
+						return false; // get outta this $.each
+					}
+				});
+
+				// all done
+				clearTimeout( timeout );
+				deferred = false;
+			};
+
+		// work on scroll, but debounced
+		var $document = $(document).scroll( function() {
+      if($scrollable.scrollTop() > 250) {
+        $toc.addClass('sticky');
+      } else {
+        $toc.removeClass('sticky');
+      }
+			// timeout hasn't been created yet
+			if ( !deferred ) {
+				timeout = setTimeout( check , 250 ); // defer this stuff
+				deferred = true;
+			}
+		});
+
+		// fix any possible failed scroll events and fix the nav automatically
+		(function() {
+			$document.scroll();
+			setTimeout( arguments.callee, 1500 );
+		})();
+		
 })( jQuery );