fixed-position-off-canvas-menu.js

/**
 * 
 * According to https://www.w3.org/TR/css-transforms-1/#transform-rendering:
 * 		"Specifying a value other than ‘none’ for the ‘transform’ property
 *		 establishes a new local coordinate system at the element that it is
 *		 applied to."
 *
 * Foundation's off canvas menu uses the transform property, causing nested
 * elements with `position: fixed` to be relative to the parent container
 * instead of the window.
 *
 * The code below attempts to make the `#off-canvas-menu` *display* relative
 * to the window again.
 * 
 * @author Ray Peters <[email protected]>
 */ 
;( function(){
	var offCanvasMenuElement, initialOffset, debouncedHandlerTimeoutID;

	// Initial values
	initialOffset = 64;
	offCanvasMenuElement = document.getElementById( "off-canvas-menu" );

	_activate();

	return;

	function _activate(){
		// Bind to window onscroll, so we know when to update the offset
		window.onscroll = function( originalHandler ) {
			return offCanvasMenuScrollHandler;

			function offCanvasMenuScrollHandler(){
				_debouncedHandler();
				if ( originalHandler ) {
					originalHandler.apply( window, arguments );
				}
			};
		}( window.onscroll );

		// Account for any existing offset on load
		_handler();
	}

	function _debouncedHandler(){
		clearTimeout( debouncedHandlerTimeoutID );
		debouncedHandlerTimeoutID = setTimeout( _handler, 100 );
	}

	function _handler(){
		_setOffsetTop( offCanvasMenuElement, document.body.scrollTop );
	}

	function _setOffsetTop( elem, newOffsetTop ) {
		elem.style.position = "fixed";
		elem.style.top = ( ( initialOffset + newOffsetTop ) + "px" );
		elem.style.height = ( ( window.outerHeight - initialOffset ) + "px" );
		elem.style.overflow = "scroll";
	}
} )();