Fix sticky navbar when top navbar height changes (#4675)

Resources/public/Admin.js

@@ -527,20 +527,27 @@ var Admin = {
         if (window.SONATA_CONFIG && window.SONATA_CONFIG.USE_STICKYFORMS) {
             Admin.log('[core|setup_sticky_elements] setup sticky elements on', subject);
 
+            var topNavbar = jQuery(subject).find('.navbar-static-top');
             var wrapper = jQuery(subject).find('.content-wrapper');
             var navbar  = jQuery(wrapper).find('nav.navbar');
             var footer  = jQuery(wrapper).find('.sonata-ba-form-actions');
 
+            jQuery(wrapper).css('padding-top', $(topNavbar).outerHeight());
+
             if (navbar.length) {
                 new Waypoint.Sticky({
                     element: navbar[0],
-                    offset:  50,
+                    offset: function() {
+                        return jQuery(topNavbar).outerHeight();
+                    },
                     handler: function( direction ) {
                         if (direction == 'up') {
                             jQuery(navbar).width('auto');
                         } else {
                             jQuery(navbar).width(jQuery(wrapper).outerWidth());
                         }
+
+                        Admin.refreshTopNavbarStuckClass(topNavbar);
                     }
                 });
             }
@@ -563,72 +570,58 @@ var Admin = {
                 });
             }
 
-            Admin.handleScroll(footer, navbar, wrapper);
+            Admin.handleScroll(footer, navbar, wrapper, topNavbar);
         }
     },
-    handleScroll: function(footer, navbar, wrapper) {
+    handleScroll: function(footer, navbar, wrapper, topNavbar) {
         if (footer.length && jQuery(window).scrollTop() + jQuery(window).height() != jQuery(document).height()) {
             jQuery(footer).addClass('stuck');
         }
 
-        jQuery(window).scroll(
-            Admin.debounce(function() {
-                if (footer.length && jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
-                    jQuery(footer).removeClass('stuck');
-                }
+        jQuery(window).scroll(function() {
+            if (footer.length && jQuery(window).scrollTop() + jQuery(window).height() == jQuery(document).height()) {
+                jQuery(footer).removeClass('stuck');
+            }
 
-                if (navbar.length && jQuery(window).scrollTop() === 0) {
-                    jQuery(navbar).removeClass('stuck');
-                }
-            }, 250)
-        );
+            if (navbar.length && jQuery(window).scrollTop() === 0) {
+                jQuery(navbar).removeClass('stuck');
+            }
+        });
 
         jQuery('body').on('expanded.pushMenu collapsed.pushMenu', function() {
-            Admin.handleResize(footer, navbar, wrapper);
+            Admin.handleResize(footer, navbar, wrapper, topNavbar);
         });
 
-        jQuery(window).resize(
-            Admin.debounce(function() {
-                Admin.handleResize(footer, navbar, wrapper);
-            }, 250)
-        );
-    },
-    handleResize: function(footer, navbar, wrapper) {
-        setTimeout(function() {
-            if (navbar.length && jQuery(navbar).hasClass('stuck')) {
-                jQuery(navbar).width(jQuery(wrapper).outerWidth());
-            }
-
-            if (footer.length && jQuery(footer).hasClass('stuck')) {
-                jQuery(footer).width(jQuery(wrapper).outerWidth());
-            }
-        }, 350); // the animation take 0.3s to execute, so we have to take the width, just after the animation ended
+        jQuery(window).resize(function() {
+            Admin.handleResize(footer, navbar, wrapper, topNavbar);
+        });
     },
-    // http://davidwalsh.name/javascript-debounce-function
-    debounce: function (func, wait, immediate) {
-        var timeout;
-
-        return function() {
-            var context = this,
-                args    = arguments;
+    handleResize: function(footer, navbar, wrapper, topNavbar) {
+        if (topNavbar.length) {
+            jQuery(wrapper).css('padding-top', jQuery(topNavbar).outerHeight());
 
-            var later = function() {
-                timeout = null;
+            Admin.refreshTopNavbarStuckClass(topNavbar);
+        }
 
-                if (!immediate) {
-                    func.apply(context, args);
-                }
-            };
+        if (navbar.length && jQuery(navbar).hasClass('stuck')) {
+            jQuery(navbar).width(jQuery(wrapper).outerWidth());
+        }
 
-            var callNow = immediate && !timeout;
+        if (footer.length && jQuery(footer).hasClass('stuck')) {
+            jQuery(footer).width(jQuery(wrapper).outerWidth());
+        }
+    },
+    refreshTopNavbarStuckClass: function (topNavbar) {
+        var stuck = jQuery('#navbar-stuck');
 
-            clearTimeout(timeout);
-            timeout = setTimeout(later, wait);
+        if (!stuck.length) {
+            stuck = jQuery('<style id="navbar-stuck">')
+                .prop('type', 'text/css')
+                .appendTo('head')
+            ;
+        }
 
-            if (callNow) {
-                func.apply(context, args);
-            }
-        };
+        stuck.html('body.fixed .content-header .navbar.stuck { top: ' + jQuery(topNavbar).outerHeight() +'px; }');
     },
     setup_readmore_elements: function(subject) {
         Admin.log('[core|setup_readmore_elements] setup readmore elements on', subject);

Resources/public/css/styles.css

@@ -28,6 +28,10 @@ body > .header .logo {
     font-family: 'Source Sans Pro', sans-serif;
 }
 
+.main-header {
+    height: 50px;
+}
+
 .logo img {
     display: inline;
     padding-bottom: 4px;