adding sticky scroll, first draft. not too happs

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%;

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>

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 );