themes-wordpress/lodestar/assets/js/global.js

(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'),
		navigationHeight,
		navigationOuterHeight,
		navPadding,
		navMenuItemHeight,
		idealNavHeight,
		navIsNotTooTall;

	// adjust header margin based on height of menu
	function adjustHeaderMargin() {
		// check to see if on mobile by checking menu-toggle display
		if ('none' === $('.menu-toggle').css('display')) {
			// Don't define this 'til we're using it, it may change
			$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);
		}
	}

	// Make sure the nav isn't taller than two rows
	navigationHeight = $navigation.height();
	navMenuItemHeight = $navMenuItem.outerHeight() * 3;
	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)
			) {
				// 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) {
					// Don't define this 'til we're using it, it may change
					$headerHeight = $('.header-top').innerHeight(true);

					// If not, fix that header!
					$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');
			}
		}
	}

	// Check to see if iOS device
	// iOS devices make a mess of background-attachment: fixed and background-size: cover

	function checkiOS() {
		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
	 */
	function supportsFixedBackground() {
		var el = document.createElement('div'),
			isSupported;

		try {
			if (!('backgroundAttachment' in el.style) || checkiOS()) {
				return false;
			}
			el.style.backgroundAttachment = 'fixed';
			isSupported = 'fixed' === el.style.backgroundAttachment;
			return isSupported;
		} catch (e) {
			return false;
		}
	}

	// Let's fire some JavaScript!
	$(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()) {
			document.documentElement.className += ' no-background-fixed';
		}
	});

	// On scroll, we want to stick/unstick the header
	$(window).on('scroll', function () {
		adjustScrollClass();
	});

	// we also want to do the same on window rezize
	$(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();
		}
	});
})(jQuery);