themes-wordpress/pique/assets/js/front-page.js

( function( $ ) {

	/*
	* Since we've absolutely positioned the header (so it sits on top of the background
	* set for our hero panel), we're going to need to adjust the margin of our hero's
	* entry-content so it fits correctly in the available space.
	*/
	function adjustHero() {
		var piqueHeaderHeight = $( '#masthead' ).height();
		var piqueHeroContent = $( '#pique-hero' ).find( '.pique-panel-content' );
		$( piqueHeroContent ).css( 'padding-top', piqueHeaderHeight );
	}

	/*
	* We're going to use the Waypoints and ScrollTo libraries to build a dynamic menu.
	* This will animate a scroll effect to and from panels in the page as well as
	* highlighting the current panel in the nav menu.
	*/
	function dynamicNav() {
		var $sections = $( '.pique-panel' );
		var $navLinks = $( '#site-navigation li a' );
		var $primaryMenu = $( '#primary-menu' );
		var $adminBar = $( '#wpadminbar' );

		// Use the Waypoints plugin to indicate our current nav item
		$sections.waypoint( {
			handler: function( direction ) {
				var activePanel = this;
				var panelID = activePanel.element.id;

				// If we're scrolling up, set the previous panel as our current panel.
				// This just means that, when we hit to top of a panel (bottom of a new panel)
				// we'll highlight the correct panel. Wheee!
				if ( 'up' === direction ) {
					// Subtract twice because waypoints is one-indexed; DOM is zero-indexed.
					var elementIndex = activePanel.key.substr( 9, 1 ) - 2;
					panelID = $sections.eq( elementIndex ).attr('id');
				}

				// Don't show any highlight for our parent nav
				if ( 'pique-hero' === panelID ) {
					$navLinks.parents( 'li' ).removeClass( 'current_page_item' );
				}

				// Find the active panel's corresponding link by matching the panel ID in the URL
				var activeLink = $( 'nav a[href="#' + panelID + '"]' ).parent( 'li' );
				// Remove any existing classes
				$navLinks.parents( 'li' ).removeClass( 'current_page_item' );
				// Highlight the currently active panel by adding a CSS class
				activeLink.addClass( 'current_page_item' );

			},
			offset: '110px'
		});

		// Use scrollTo library to smoothly scroll between panels.
		// Note that the admin bar lenght is only taken into consideration on screen size > 480px, when it becomes fixed.
		// Also, we take into account he height of the primary menu after 768px.
		$navLinks.click( function() {
			var yCoord = ( 1 === $adminBar.length && $( window ).outerWidth() > 480 ) ? $adminBar.outerHeight() : 0;
			var offset = $( window ).outerWidth() > 768 ? $primaryMenu.outerHeight() : 0;
			$.scrollTo( $( this ).attr( 'href' ), {
				duration: 400,
				offset: { 'top': -1 * ( yCoord + offset ) }
			} );
		});
	}

	// Run our functions on document load
	$( window ).on( 'load', function() {
		adjustHero();
		dynamicNav();
	});

	// Annnnnd re-run the hero adjustment every time the window resizes
	var isResizing = false;
	$( window ).on('resize', function() {
		if (isResizing) {
			return;
		}

		isResizing = true;
		setTimeout(function() {
			adjustHero();
			isResizing = false;
		}, 150);
	});

} )( jQuery );