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.

Built from https://develop.svn.wordpress.org/trunk@26059


git-svn-id: http://core.svn.wordpress.org/trunk@25982 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Lance Willett 2013-11-09 15:32:09 +00:00
parent 750258a7c6
commit dee70a91a6
1 changed files with 20 additions and 11 deletions

View File

@ -59,23 +59,32 @@
} ); } );
/* /*
* 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 * The callback on the scroll event is only added if there is a header
* image and we are not on mobile. * image and we are not on mobile.
*/ */
if ( body.is( '.header-image' ) && _window.width() > 781 ) { if ( _window.width() > 781 ) {
var mastheadHeight = $( '#masthead' ).height();
if ( mastheadHeight > 48 ) {
body.removeClass( 'masthead-fixed' );
}
if ( body.is( '.header-image' ) ) {
var toolbarOffset = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0, var toolbarOffset = body.is( '.admin-bar' ) ? $( '#wpadminbar' ).height() : 0,
mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset; mastheadOffset = $( '#masthead' ).offset().top - toolbarOffset;
_window.on( 'scroll.twentyfourteen', function() { _window.on( 'scroll.twentyfourteen', function() {
if ( window.scrollY > mastheadOffset ) { if ( ( window.scrollY > mastheadOffset ) && ( mastheadHeight < 49 ) ) {
body.addClass( 'masthead-fixed' ); body.addClass( 'masthead-fixed' );
} else { } else {
body.removeClass( 'masthead-fixed' ); body.removeClass( 'masthead-fixed' );
} }
} ); } );
} }
}
// Focus styles for menus. // Focus styles for menus.
$( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() { $( '.primary-navigation, .secondary-navigation' ).find( 'a' ).on( 'focus.twentyfourteen blur.twentyfourteen', function() {