#5017: Fix header w/scroll w/no custom header (#6444)

lodestar/assets/js/global.js

@@ -1,13 +1,11 @@
-( function( $ ) {
-
-	var $header = $( '.header-top:first' ),
-		$headerHeight = $( '.header-top' ).innerHeight(),
-		$headerOffset = $( '.custom-header' ).innerHeight(),
+(function ($) {
+	var $header = $('.header-top:first'),
+		$headerHeight = $('.header-top').innerHeight(),
+		$headerOffset = $('.custom-header').innerHeight(),
 		$headerHiddenClass = 'site-header-hidden',
 		$headerFixedClass = 'site-header-fixed',
-
-		$navigation = $( '.main-navigation' ),
-		$navMenuItem = $navigation.find( '.menu-item' ),
+		$navigation = $('.main-navigation'),
+		$navMenuItem = $navigation.find('.menu-item'),
 		navigationHeight,
 		navigationOuterHeight,
 		navPadding,
@@ -15,54 +13,55 @@
 		idealNavHeight,
 		navIsNotTooTall;
 
-
 	// adjust header margin based on height of menu
-	function adjustHeaderMargin(){
-
+	function adjustHeaderMargin() {
 		// check to see if on mobile by checking menu-toggle display
-		if ( 'none' === $( '.menu-toggle').css( 'display') ) {
-
+		if ('none' === $('.menu-toggle').css('display')) {
 			// Don't define this 'til we're using it, it may change
-			$headerHeight = $( '.header-top' ).innerHeight();
+			$headerHeight = $('.header-top').innerHeight();
 
 			// if yes, we want to bump the custom header down a bit, so the menu doesn't cut it off
-			$( '.custom-header-image').css( 'margin-top', $headerHeight );
+			$('.custom-header-image').css('margin-top', $headerHeight);
 		}
 	}
 
 	// Make sure the nav isn't taller than two rows
-	navigationHeight  = $navigation.height();
+	navigationHeight = $navigation.height();
 	navMenuItemHeight = $navMenuItem.outerHeight() * 3;
-	idealNavHeight    = navMenuItemHeight;
-	navIsNotTooTall   = navigationHeight <= idealNavHeight;
+	idealNavHeight = navMenuItemHeight;
+	navIsNotTooTall = navigationHeight <= idealNavHeight;
 
 	//we add the scroll class to the navs
 	function adjustScrollClass() {
 		// Make sure we're not on a mobile screen
-		if ( 'none' === $( '.menu-toggle').css( 'display') ) {
-			if ( $( window ).scrollTop() <= $headerOffset && $header.hasClass( $headerFixedClass ) ) {
-				$header.removeClass( $headerFixedClass );
-				$header.addClass( $headerHiddenClass );
-
-			} else if ( $( window ).scrollTop() >= $headerOffset ) { //If the scroll is more than the custom header
+		if ('none' === $('.menu-toggle').css('display')) {
+			if (
+				$(window).scrollTop() <= $headerOffset &&
+				$header.hasClass($headerFixedClass)
+			) {
+				// accounts for empty or removed custom header image
+				if (0 !== $headerOffset) {
+					$header.removeClass($headerFixedClass);
+					$header.addClass($headerHiddenClass);
+				}
+			} else if ($(window).scrollTop() >= $headerOffset) {
+				//If the scroll is more than the custom header
 
 				// Make sure the menu is not too tall
-				if ( navIsNotTooTall || navMenuItemHeight == 0 ) {
-
+				if (navIsNotTooTall || navMenuItemHeight == 0) {
 					// Don't define this 'til we're using it, it may change
-					$headerHeight = $( '.header-top' ).innerHeight( true );
+					$headerHeight = $('.header-top').innerHeight(true);
 
 					// If not, fix that header!
-					$header.addClass( $headerFixedClass );
-					$header.removeClass( $headerHiddenClass );
-					$( '.custom-header' ).css( 'margin-top', $headerHeight );
+					$header.addClass($headerFixedClass);
+					$header.removeClass($headerHiddenClass);
+					$('.custom-header').css('margin-top', $headerHeight);
 				}
-
 			} else {
 				//If not we remove it
-				$header.removeClass( $headerFixedClass );
-				$header.removeClass( $headerHiddenClass );
-				$( '.custom-header' ).css( 'margin-top', 'auto' );
+				$header.removeClass($headerFixedClass);
+				$header.removeClass($headerHiddenClass);
+				$('.custom-header').css('margin-top', 'auto');
 			}
 		}
 	}
@@ -71,79 +70,80 @@
 	// iOS devices make a mess of background-attachment: fixed and background-size: cover
 
 	function checkiOS() {
-		return /iPad|iPhone|iPod/.test(navigator.userAgent) && ! window.MSStream;
+		return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 	}
 
 	/*
-	* Test if background-attachment: fixed is supported.
-	* @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed
-	*/
+	 * Test if background-attachment: fixed is supported.
+	 * @link http://stackoverflow.com/questions/14115080/detect-support-for-background-attachment-fixed
+	 */
 	function supportsFixedBackground() {
 		var el = document.createElement('div'),
-		isSupported;
+			isSupported;
 
 		try {
-			if ( ! ( 'backgroundAttachment' in el.style ) || checkiOS() ) {
+			if (!('backgroundAttachment' in el.style) || checkiOS()) {
 				return false;
 			}
 			el.style.backgroundAttachment = 'fixed';
-			isSupported = ( 'fixed' === el.style.backgroundAttachment );
+			isSupported = 'fixed' === el.style.backgroundAttachment;
 			return isSupported;
-		}
-		catch (e) {
+		} catch (e) {
 			return false;
 		}
 	}
 
 	// Let's fire some JavaScript!
-	$( document ).ready( function() {
+	$(document).ready(function () {
 		// On load, we want to adjust the header margin
 		adjustHeaderMargin();
 		adjustScrollClass();
 
 		// We also want to check the device, and add a class if not iOS:
-		if ( false === supportsFixedBackground() ) {
+		if (false === supportsFixedBackground()) {
 			document.documentElement.className += ' no-background-fixed';
 		}
-	} );
+	});
 
 	// On scroll, we want to stick/unstick the header
-	$( window ).on( 'scroll', function() {
+	$(window).on('scroll', function () {
 		adjustScrollClass();
-	} );
+	});
 
 	// we also want to do the same on window rezize
-	$( window ).on( 'resize', function() {
-		setTimeout( adjustHeaderMargin, 500 );
-	} );
+	$(window).on('resize', function () {
+		setTimeout(adjustHeaderMargin, 500);
+	});
 
 	// Use mutant observer to check when .wf-active is added to theme for Custom Fonts.
 	// That way we can make sure the header is the correct height when it happens.
-	var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
-
-    $.fn.attrchange = function(callback) {
-        if (MutationObserver) {
-            var options = {
-                subtree: false,
-                attributes: true
-            };
-
-            var observer = new MutationObserver(function(mutations) {
-                mutations.forEach(function(e) {
-                    callback.call(e.target, e.attributeName);
-                });
-            });
-
-            return this.each(function() {
-                observer.observe(this, options);
-            });
-        }
-    }
-
-	$( 'html' ).attrchange( function( attrName ) {
-		if( attrName == 'class' && $( 'html').hasClass( 'wf-active' ) ) {
-			adjustHeaderMargin();
+	var MutationObserver =
+		window.MutationObserver ||
+		window.WebKitMutationObserver ||
+		window.MozMutationObserver;
+
+	$.fn.attrchange = function (callback) {
+		if (MutationObserver) {
+			var options = {
+				subtree: false,
+				attributes: true,
+			};
+
+			var observer = new MutationObserver(function (mutations) {
+				mutations.forEach(function (e) {
+					callback.call(e.target, e.attributeName);
+				});
+			});
+
+			return this.each(function () {
+				observer.observe(this, options);
+			});
 		}
-	} );
+	};
 
-} )( jQuery );
+	$('html').attrchange(function (attrName) {
+		if (attrName == 'class' && $('html').hasClass('wf-active')) {
+			adjustHeaderMargin();
+		}
+	});
+})(jQuery);

lodestar/style.css

@@ -1242,6 +1242,10 @@ body:not(.logged-in) .lodestar-panel .jetpack-testimonial .entry-header {
 	padding: 2.5em 0 0;
 }
 
+.site-main {
+	margin-top: 32px;
+}
+
 /*--------------------------------------------------------------
 ## Posts
 --------------------------------------------------------------*/