preview pages: get rid of content jumps when subnav -> subnav-fixed
[bootswatch] / js / application.js
index 670947c..8daeebf 100755 (executable)
@@ -1,29 +1,35 @@
-!function ($) {
+(function ($) {
 
-  $(function(){
+       $(function(){
 
-    // fix sub nav on scroll
-    var $win = $(window)
-      , $nav = $('.subnav')
-         , navHeight = $('.navbar').first().height()
-      , navTop = $('.subnav').length && $('.subnav').offset().top - navHeight
-      , isFixed = 0
+               // fix sub nav on scroll
+               var $win = $(window),
+                               $body = $('body'),
+                               $nav = $('.subnav'),
+                               navHeight = $('.navbar').first().height(),
+                               subnavHeight = $('.subnav').first().height(),
+                               subnavTop = $('.subnav').length && $('.subnav').offset().top - navHeight,
+                               marginTop = parseInt($body.css('margin-top'), 10);
+                               isFixed = 0;
 
-    processScroll()
+               processScroll();
 
-    $win.on('scroll', processScroll)
+               $win.on('scroll', processScroll);
 
-    function processScroll() {
-      var i, scrollTop = $win.scrollTop()
-      if (scrollTop >= navTop && !isFixed) {
-        isFixed = 1
-        $nav.addClass('subnav-fixed')
-      } else if (scrollTop <= navTop && isFixed) {
-        isFixed = 0
-        $nav.removeClass('subnav-fixed')
-      }
-    }
+               function processScroll() {
+                       var i, scrollTop = $win.scrollTop();
 
-  })
+                       if (scrollTop >= subnavTop && !isFixed) {
+                               isFixed = 1;
+                               $nav.addClass('subnav-fixed');
+                               $body.css('margin-top', marginTop + subnavHeight + 'px');
+                       } else if (scrollTop <= subnavTop && isFixed) {
+                               isFixed = 0;
+                               $nav.removeClass('subnav-fixed');
+                               $body.css('margin-top', marginTop + 'px');
+                       }
+               }
 
-}(window.jQuery)
\ No newline at end of file
+       });
+
+})(window.jQuery);
\ No newline at end of file