side nav behaviour when scrolling and content styling (h4)

theme/static/css/main.css

@@ -28,10 +28,10 @@ body {
 
 /* Headings */
 h1 {font-size: 2em }
-h2 {font-size: 2.5em; text-transform: uppercase;margin-top:80px;margin-bottom: .8em; padding-top: 30px;}	/* 22px */
+h2 {font-size: 2.5em; text-transform: uppercase;margin-top:80px;margin-bottom: .8em; padding-top: 10px;}	/* 22px */
 h2:first-child {margin-top:0;}	/* 22px */
-h3 {font-size: 1.8em; color: #999; margin-top: 40px}	/* 20px */
-h4 {font-size: 1.286em}	/* 18px */
+h3 {font-size: 2em; color: #999; margin-top: 40px}	/* 20px */
+h4 {font-size: 1.7em; margin-top: 30px;font-weight: 300;}	/* 18px */
 h5 {font-size: 1.143em}	/* 16px */
 h6 {font-size: 1em}		/* 14px */
 
@@ -65,7 +65,7 @@ div.line-block,
 p { margin-top: 1em;
     margin-bottom: 1em;}
 
-strong, b {font-weight: bold;}
+strong, b {font-weight: bolder;}
 em, i {font-style: italic;}
 
 /* Lists */
@@ -263,6 +263,8 @@ nav#side-nav {
 			background-image: url(../images/puce-sideNav-active.png);
 			margin-right: -60px;
 			padding-right: 55px;
+			color: #333;
+			font-weight: bolder;
 		}
 
 		nav#side-nav ul li a {
@@ -271,6 +273,8 @@ nav#side-nav {
 			text-decoration: none;
 		}
 
+
+
 /*
 	Side content
 *****************/

theme/static/scripts/mine.js

@@ -1,24 +1,66 @@
 
 $(document).ready(function() {
 
-	$("#toc").sticky({
+	$('#toc').sticky({
 		topSpacing:30,
 		widthFromWrapper: false
 	});
 
-	$('#side-nav ul li:first-child a').addClass("active")
+	$('#side-nav ul li:first-child a').addClass('active')
 
-	$('#side-nav ul li a').on("click",function(e){
+	$('#side-nav ul li a').on('click',function(e){
 		e.preventDefault();
 		var target = ($(this).attr('href')).substr(1);
 		$('body,html').animate({
-          scrollTop: $("#"+target).offset().top
+          scrollTop: $('#'+target).offset().top
         }, 1000,'swing', function(){
-        	window.location.hash = "#"+target;
+        	window.location.hash = '#'+target;
         });
-		$('#side-nav ul li a').removeClass("active");		
-		$(this).addClass("active");
+		$('#side-nav ul li a').removeClass('active');		
+		$(this).addClass('active');
 
 	});	
 
-});
+	var lastId,
+	    sideMenu = $('#toc ul'),
+	    // All list items
+	    menuItems = sideMenu.find('a'),
+	    // Anchors corresponding to menu items
+	    scrollItems = menuItems.map(function(){
+	      var item = $($(this).attr('href'));
+	      if (item.length) { return item; }
+	    });
+
+
+	// Bind to scroll
+	$(window).scroll(function(){
+
+	   // Get container scroll position
+	   var fromTop = $(this).scrollTop() + 80;
+
+	   if (fromTop > $('#side-content h2').offset().top) {
+	   
+		   // Get id of current scroll item
+		   var cur = scrollItems.map(function(){
+		     if ($(this).offset().top < fromTop)
+		       return this;
+		   });
+
+		   // Get the id of the current element
+		   cur = cur[cur.length-1];
+		   var id = cur && cur.length ? cur[0].id : '';
+
+		   if (lastId !== id) {
+		       lastId = id;
+		       // Set/remove active class
+		       //window.location.hash = '#'+id;
+		       menuItems
+		         .removeClass('active')
+		         .filter('[href=#'+id+']').addClass('active');
+
+		   }               
+		}
+	});
+
+});
+