Changeset 26059

Timestamp:

11/09/2013 03:31:29 PM (12 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: when header is more than 48px tall (like two lines of menu items), unfix the header so it doesn't overlap the page content. Props iamtakashi, fixes #25554.

File:

• trunk/src/wp-content/themes/twentyfourteen/js/functions.js (modified) (1 diff)

trunk/src/wp-content/themes/twentyfourteen/js/functions.js

@@ -60 +60 @@
 
         /*
-         * Fixed navbar.
+         * Fixed header for large screen.
+         * If the header becomes more than 48px tall, unfix the header.
          *
          * The callback on the scroll event is only added if there is a header
          * image and we are not on mobile.
          */
-        if ( body.is( '.header-image' ) && _window.width() > 781 ) {
-            var toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0,
-                mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
+         if ( _window.width() > 781 ) {
+            var mastheadHeight = $( '#masthead' ).height();
 
-            _window.on( 'scroll.twentyfourteen', function() {
-                if ( window.scrollY > mastheadOffset ) {
-                    body.addClass( 'masthead-fixed' );
-                } else {
-                    body.removeClass( 'masthead-fixed' );
-                }
-            } );
+            if ( mastheadHeight > 48 ) {
+                body.removeClass( 'masthead-fixed' );
+            }
+
+            if ( body.is( '.header-image' ) ) {
+                var toolbarOffset  = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0,
+                    mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
+
+                _window.on( 'scroll.twentyfourteen', function() {
+                    if ( ( window.scrollY > mastheadOffset ) && ( mastheadHeight < 49 ) ) {
+                        body.addClass( 'masthead-fixed' );
+                    } else {
+                        body.removeClass( 'masthead-fixed' );
+                    }
+                } );
+            }
         }