https://strikefans.com/wp-content/themes/pique-wpcom/assets/js/header.js?ver=20151030

1/**
2 * Header enhancements for more intelligent dynamic headers.
3 *
4 * This sets the masthead to the height of an uploaded image and applies sticky navigation.
5 */
6
7( function( $ ) {
8
9	// Fit header into the available space
10	function fitHeader() {
11		var windowWidth = $( window ).width();
12		var headerHeight = $( '#pique-header-image' ).height();
13		var navHeight = $( '#primary-menu' ).height();
14		var brandingHeight = $( '.site-branding' ).height();
15
16		// Make sure we're not on the homepage, since that handles stuff differently
17		if ( ! $( 'body' ).hasClass( 'pique-frontpage' )) {
18			if ( 0 < $( '#pique-header-image' ).length ) {
19				// Add the height of our header image and the height of our nav
20				$( '#masthead' ).css( 'height', headerHeight + navHeight );
21			} else {
22				// Give enough room for our branding
23				console.log('no header');
24				$( '#masthead' ).css( 'height', brandingHeight + navHeight + 40 );
25			}
26		}
27	};
28
29	// Priority+ navigation, whee!
30	function priorityNav() {
31		// Make sure we have a menu and that the more-more item is present
32		if ( 0 < $( '#site-navigation' ).length && 0 < $( '#more-menu' ).length ) {
33			var navWidth = 0;
34			var firstMoreElement = $( '#more-menu li' ).first();
35
36			// Calculate the width of our "more" containing element
37			var moreWidth = $( '#more-menu' ).outerWidth( true );
38
39			// Calculate the current width of our navigation
40			$( '#site-navigation .menu > li' ).each( function() {
41				navWidth += $( this ).outerWidth( true );
42			});
43
44			// Calculate our available space
45			var availableSpace = $( '#site-navigation' ).outerWidth( true ) - moreWidth;
46
47			// If our nav is wider than our available space, we're going to move items
48			if (navWidth > availableSpace) {
49				var lastItem = $( '#site-navigation .menu > li:not(#more-menu)' ).last();
50				lastItem.attr( 'data-width', lastItem.outerWidth( true ) );
51				lastItem.prependTo( $( '#more-menu .sub-menu' ).eq( 0 ) );
52				priorityNav(); // Rerun this function!
53
54				// But if we have the extra space, we should add the items back to our menu
55			} else if (navWidth + firstMoreElement.data( 'width' ) < availableSpace) {
56				// Check to be sure there's enough space for our extra element
57				firstMoreElement.insertBefore( $( '#site-navigation .menu > li' ).last() );
58				priorityNav();
59			}
60
61			// Hide our more-menu entirely if there's nothing in it
62			if ($( '#more-menu li' ).length > 0) {
63				$( '#more-menu' ).addClass( 'visible' );
64			} else {
65				$( '#more-menu' ).removeClass( 'visible' );
66			}
67		} // check for body class
68	}; // function priorityNav
69
70	// Okay, now we want to stick-ify our menu when we reach it
71	function stickyNav() {
72		var nav_container = $( '#site-navigation-wrapper' );
73		var nav = $( '#site-navigation' );
74
75		nav_container.waypoint( {
76			handler: function(direction) {
77				nav.toggleClass( 'sticky', direction == 'down' );
78
79				// Ensure we don't have an awkward jump when the menu sticks
80				if ('down' === direction) {
81					nav_container.css( { 'height':nav.outerHeight() } );
82				} else {
83					nav_container.css( { 'height':'auto' } );
84				}
85			}
86		});
87	};
88
89	// Run our functions once the window has loaded fully
90	$( window ).on( 'load', function() {
91		priorityNav();
92		fitHeader();
93		stickyNav();
94	});
95
96	// Annnnnd also every time the window resizes
97	var isResizing = false;
98	$( window ).on('resize', function() {
99		if (isResizing) {
100			return;
101		}
102
103		isResizing = true;
104		setTimeout(function() {
105			priorityNav();
106			fitHeader();
107			isResizing = false;
108		}, 150);
109	});
110
111} )( jQuery );