preview pages: get rid of content jumps when subnav -> subnav-fixed

iainp999 · Feb 7, 2013 · f750ad3 · f750ad3
1 parent 14dc685
commit f750ad3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/css/bootswatch.css b/css/bootswatch.css
@@ -24,6 +24,10 @@ section {
 	font-size: 54px;
 }
 
+.subhead > div:first-child {
+	min-height: 200px;
+}
+
 .subnav {
 	margin-bottom: 60px;
 	width: 100%;

diff --git a/js/application.js b/js/application.js
@@ -4,9 +4,12 @@
 
 		// fix sub nav on scroll
 		var $win = $(window),
+				$body = $('body'),
 				$nav = $('.subnav'),
 				navHeight = $('.navbar').first().height(),
-				navTop = $('.subnav').length && $('.subnav').offset().top - navHeight,
+				subnavHeight = $('.subnav').first().height(),
+				subnavTop = $('.subnav').length && $('.subnav').offset().top - navHeight,
+				marginTop = parseInt($body.css('margin-top'), 10);
 				isFixed = 0;
 
 		processScroll();
@@ -15,12 +18,15 @@
 
 		function processScroll() {
 			var i, scrollTop = $win.scrollTop();
-			if (scrollTop >= navTop && !isFixed) {
+
+			if (scrollTop >= subnavTop && !isFixed) {
 				isFixed = 1;
 				$nav.addClass('subnav-fixed');
-			} else if (scrollTop <= navTop && isFixed) {
+				$body.css('margin-top', marginTop + subnavHeight + 'px');
+			} else if (scrollTop <= subnavTop && isFixed) {
 				isFixed = 0;
 				$nav.removeClass('subnav-fixed');
+				$body.css('margin-top', marginTop + 'px');
 			}
 		}