Off Screen Content with Genesis Theme

function.php

<?php

// Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'themeprefix_enqueue_scripts_styles' );
function themeprefix_enqueue_scripts_styles() {

	wp_enqueue_style( 'themeprefix-ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css', array(), CHILD_THEME_VERSION );
	wp_enqueue_script( 'themeprefix-offscreen', get_stylesheet_directory_uri() . '/js/offscreen.js', array( 'jquery' ), '1.0.0', true );
}

// Register Offscreen Content Widget
genesis_register_sidebar( array(
	'id'          => 'offscreen-content',
	'name'        => __( 'Offscreen Content', 'themeprefix' ),
	'description' => __( 'This is the offscreen content section.', 'themeprefix' ),
) );


// Add offscreen content if active
add_action( 'genesis_before_header', 'themeprefix_offscreen_content_output' );
function themeprefix_offscreen_content_output() {

	$button = '<button class="offscreen-content-toggle"><i class="icon ion-ios-close-empty"></i> <span class="screen-reader-text">' . __( 'Hide Offscreen Content', 'themeprefix' ) . '</span></button>';

	if ( is_active_sidebar( 'offscreen-content' ) ) {

		echo '<div class="offscreen-content-icon"><button class="offscreen-content-toggle"><i class="icon ion-ios-more"></i> <span class="screen-reader-text">' . __( 'Show Offscreen Content', 'themeprefix' ) . '</span></button></div>';

	}

	genesis_widget_area( 'offscreen-content', array(
		'before' => '<div class="offscreen-content"><div class="offscreen-container"><div class="widget-area">' . $button . '<div class="wrap">',
		'after'  => '</div></div></div></div>'
	));

}

offscreen.css

/* Offscreen Content
---------------------------------------------------------------------------------------------------- */

.no-scroll {
	overflow: hidden;
}

.offscreen-content {
	background-color: rgba( 255, 255, 255, 1.0);
	display: none;
	height: 100%;
	left: 0;
	overflow-y: scroll;
	padding: 20px;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 10000;
}

.offscreen-content .wrap {
	margin-left: auto;
	margin-right: auto;
	max-width: 720px;
}

.offscreen-container {
	display: table;
	overflow: hidden;
	table-layout: fixed;
	text-align: center;
	width: 100%;
}

.offscreen-container .widget-area {
	display: table-cell;
	padding-bottom: 20px;
	vertical-align: middle;
	width: 100%;
}


/* Offscreen Content Icon
--------------------------------------------- */

.icon {
	font-size: 36px;
	font-size: 3.6rem;
}

.offscreen-content-icon,
.offscreen-content-toggle {
	position: fixed;
	right: 20px;
	top: 18px;
	z-index: 10000;
}

.admin-bar .offscreen-content-icon,
.admin-bar .offscreen-content-toggle {
	top: 52px;
}

.offscreen-content button,
.offscreen-content-icon button {
    	background-color: transparent;
	color: #000;
	font-size: 20px;
	font-size: 2rem;
    	padding: 2px 10px 2px 12px;
}

.offscreen-content button:hover,
.offscreen-content-icon button:hover {
	color: #d43c67;
}

/* Offscreen enews
--------------------------------------------- */

.offscreen-content .enews-widget {
	background-color: #f5f5f5;
	padding: 60px;
}

.offscreen-content .enews-widget form {
	margin-left: 60px;
	margin-right: 60px;
}

offscreen.js

jQuery(function($) {

	// Set offscreen container height
	var windowHeight = $(window).height();

	$( '.offscreen-container' ).css({
		'height': windowHeight + 'px'
	});

	if ( ( 'relative' !== $( '.js .nav-primary' ).css( 'position' ) ) ) {
		var headerHeight = $( '.site-header' ).height();
		$( '.site-inner' ).not( '.front-page .site-inner' ).css( 'margin-top', headerHeight+'px' );
	} else {
		$( '.site-inner' ).removeAttr( 'style' );
	}

	$(window).resize(function() {

		var windowHeight = $(window).height();

		$( '.offscreen-container' ).css({
			'height': windowHeight + 'px'
		});

		if ( ( 'relative' !== $( '.js .nav-primary' ).css( 'position' ) ) ) {
			var headerHeight = $( '.site-header' ).height();
			$( '.site-inner' ).not( '.front-page .site-inner' ).css( 'margin-top', headerHeight+'px' );
		} else {
			$( '.site-inner' ).removeAttr( 'style' );
		}

	});



	// Set offscreen content variables
	var body = $( 'body' ),
		content = $( '.offscreen-content' ),
		sOpen = false;

	// Toggle the offscreen content widget area
	$(document).ready(function() {

		$( '.offscreen-content-toggle' ).click(function() {
			__toggleOffscreenContent();
		});

	});

	function __toggleOffscreenContent() {

		if (sOpen) {
			content.fadeOut();
			body.toggleClass( 'no-scroll' );
			sOpen = false;
		} else {
			content.fadeIn();
			body.toggleClass( 'no-scroll' );
			sOpen = true;
		}

	}

});