Don't fix the header. Just fix the navigation

diff --git a/templates/web/common.css b/templates/web/common.css
index 33748600ceb6e803a6fd7da76c664ed5cb253a80..e0098be7611410e9201a5dea372ffdd881b44ea9 100644 (file)
--- a/templates/web/common.css
+++ b/templates/web/common.css
@@ -108,7 +108,7 @@ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
     color:        #aaf;
   }
 
-  #header, .navigation {
+  #header, .nav {
     opacity:      0.925;
   }
 
@@ -148,7 +148,10 @@ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
 
 /* Navigation */
 
-  .navigation {
+  .nav {
+    position:       relative;
+    top:            0;
+    left:           0;
     margin-top:     6em;
     padding:      0 0 0.5em 0;
     width:        100%;
@@ -158,45 +161,44 @@ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acron
     z-index:      1000;
   }
 
-  .navigation li {
+  .nav li {
     display:      inline;
     font-size:      1.2em;
     padding:      0 0.3em;
   }
 
-  .navigation li a         { color: #fff; }
-  .navigation li a:hover   { color: #aaf; }
-  .navigation li a:visited { color: #aaf; }
-  .navigation li a:visited:hover { color: #fff; } 
+  .nav li a         { color: #fff; }
+  .nav li a:hover   { color: #aaf; }
+  .nav li a:visited { color: #aaf; }
+  .nav li a:visited:hover { color: #fff; } 
 
-  #outer > .navigation.fixed {
+  #outer > #nav_float {
     position:     fixed;
     top:        0;
     left:       0;
-  }
-
-  #outer > .navigation.spacer {
-    visibility:     hidden;
+    width:      100%;
+    display:    none;
+    margin-top: 0;
   }
 
 /* Search Field */
-  .navigation li.search, .navigation form {
+  .nav li.search, .nav form {
     display:          inline;
     padding-top:      4px;
   }
-  .navigation .search_field_container.roundit .search_field {
+  .nav .search_field_container.roundit .search_field {
     border:       0;
     padding:      0;
     margin:       0;
   }
-  .navigation .search_field_container.roundit {
+  .nav .search_field_container.roundit {
     background-color:   #fff;
     -moz-border-radius:   1em;
     -webkit-border-radius:    1em;
     padding:      0.1em 1em;
     font-size:      1.2em;
   }
-  .navigation .search_field_container {
+  .nav .search_field_container {
     cursor:       text;
   }
 

diff --git a/templates/web/common.js b/templates/web/common.js
index e4329c43b636c0e70cb605849bc047af4790a3f9..2ea4d9a486f6ddadbd1cb787cc3cdcea45005d43 100644 (file)
--- a/templates/web/common.js
+++ b/templates/web/common.js
@@ -1,11 +1,31 @@
 // Fix the header and navigation at the top of the page
-(function () {
-    $('#header').addClass('fixed');
-    if ($('#header').css('position') === 'fixed') {
-        $('.navigation').before($('.navigation').clone().addClass('spacer')).addClass('fixed');
-        $('#outer > .right_bar, #outer > .left_bar').addClass('display');
-    }
-})();
+(function ($) {
+
+    var $nav_float = $('#nav_flow').clone().attr('id','nav_float').appendTo('#outer');
+
+    var floating = false;
+
+    $(window).bind('load resize scroll',function () {
+        var header_height = $('#header').height();
+        var top = $(this).scrollTop();
+
+        if( top > header_height ){
+            if( !floating ){
+                $nav_float.show();
+                $('#nav_flow').css('visibility','hidden');
+                floating = true;
+            }
+        } else {
+            if( floating ){
+                $nav_float.hide();
+                $('#nav_flow').css('visibility','visible');
+                floating = false;
+            }
+        }
+    });
+
+    $('#outer > .right_bar, #outer > .left_bar').addClass('display');
+})(jQuery);
 
 // Add branding for mirrors
 if (document.location.href.match(/^https?:\/\/([^\/]+\.)*exim\.org\//)) {
@@ -45,7 +65,7 @@ if (document.location.href.match(/^https?:\/\/([^\/]+\.)*exim\.org\//)) {
 (function () {
 
     // Add placeholder functionality to browsers which don't support it
-    if (!('placeholder' in document.createElement('input'))) $('.navigation li.search input.search_field').focus(function (e) {
+    if (!('placeholder' in document.createElement('input'))) $('.nav li.search input.search_field').focus(function (e) {
         if ($(this).val() === ' ' + $(this).attr('placeholder')) $(this).val('').css('color', '#000');
     }).blur(function (e) {
         if ($(this).val() === ' ' + $(this).attr('placeholder') || $(this).val() === '') $(this).css('color', '#666').val(' ' + $(this).attr('placeholder'));
@@ -58,8 +78,7 @@ if (document.location.href.match(/^https?:\/\/([^\/]+\.)*exim\.org\//)) {
 })();
 
 // Jump to the right location on the page. Fixed header can cause problems.
-if ($('#header').css('position') === 'fixed') {
-
+(function ($) {
     // Jump to the given ID
     var jump = function (id) {
         if ($('#' + id).length == 0) return false;
@@ -67,7 +86,7 @@ if ($('#header').css('position') === 'fixed') {
         document.location.href = document.location.href.replace(/#.+/, '') + '#' + id;
 
         $('html,body').animate({
-            scrollTop: $('#' + id).position()['top'] - $('#header').height() - $('.navigation.fixed').height() - 5
+            scrollTop: $('#' + id).position()['top'] - $('.nav').height() - 5
         }, 100);
 
         return true;
@@ -94,4 +113,4 @@ if ($('#header').css('position') === 'fixed') {
     $(window).bind('hashchange', function (e) {
         if (jump(document.location.href.replace(/^.*#(.+)$/, '$1'))) e.preventDefault();
     });
-}
\ No newline at end of file
+})(jQuery);

diff --git a/templates/wrapper.xsl b/templates/wrapper.xsl
index 7c599d063b971b7857686ac7a1cdc3032678c656..f0c36755d7b9ac5af4efccb44c9c4af674b39f0a 100644 (file)
--- a/templates/wrapper.xsl
+++ b/templates/wrapper.xsl
@@ -54,7 +54,7 @@
 
                       <!-- Navigation -->
 
-                         <ul class="navigation">
+                         <ul id="nav_flow" class="nav">
                             <li> <a href="{$docroot}/mirrors.html">Download</a> </li>
                             <li> <a href="{$docroot}/docs.html">Documentation</a> </li>
                             <li> <a href="{$docroot}/maillist.html">Mailing Lists</a> </li>