Genesis: Display a Fixed Mini Header when Scrolling down in Genesis

functions.php

add_action( 'genesis_after_header', 'sk_mini_fixed_header' );
/**
 * Mini header with a logo image at left and menu at right.
 *
 * @author Sridhar Katakam
 * @link   http://sridharkatakam.com/
 */
function sk_mini_fixed_header() { ?>
	<div class="mini-header">
		<div class="wrap">
			<div class="alignleft">
				<a href="<?php echo get_bloginfo( 'url' ); ?>"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo-mini.png" alt="Home" /></a>
			</div>
			<div class="alignright">
				<?php wp_nav_menu( array('menu' => 'Header Menu', 'menu_class' => 'menu genesis-nav-menu' )); ?>
			</div>
		</div>
	</div>
<?php }

//* Enqueue Scripts
add_action( 'wp_enqueue_scripts', 'sk_load_scripts' );
function sk_load_scripts() {

	wp_enqueue_script( 'general', get_stylesheet_directory_uri() .'/js/general.js' , array( 'jquery' ), '1.0.0', true );

}

general.js

jQuery(function( $ ){

    // display mini header when the user scrolls to bottom edge of .site-header.
    var trigger_point = $('.site-header').outerHeight( true );
    // display mini header when user scrolls to top of .site-inner.
    // var trigger_point = $('.site-inner').offset().top;

    // function to determine whether the mini sticky header should be shown or hidden.
    var sticky_mini_header = function() {
        var scroll_top = $(window).scrollTop(); // current vertical scroll position from the top
         
        // if we've scrolled beyond the trigger point, display mini header else do not. And, do this only when the screen width is greater than 500px.
	   if (scroll_top > trigger_point && window.innerWidth > 500) {
			$('.mini-header').slideDown();
        } else {
			$('.mini-header').slideUp(200);
        } 
		 
    };
    // run our function on load
    sticky_mini_header();
     
    // and run it again every time user scrolls
    $(window).scroll(function() {
         sticky_mini_header();
    });

});

gistfile1.css

/* # Site Header
---------------------------------------------------------------------------------------------------- */

.site-header {
	/*min-height: 160px;*/
	background-color: #fff;
}

.site-header .wrap {
	/*padding: 40px 0;*/
	padding: 10px 0;
}

/* ## Title Area
--------------------------------------------- */

.title-area {
	float: left;
	/*width: 360px;*/
	width: 450px;
	padding: 10px 0;
}

.header-full-width .title-area {
	width: 100%;
}

.site-title {
	font-size: 32px;
	font-weight: 400;
	line-height: 1.2;
}

.site-title a,
.site-title a:hover {
	color: #333;
}

.header-image .site-title > a {
	float: left;
	width: 100%;
	/*min-height: 60px;*/
	min-height: 99px;
	background: url(images/logo.png) no-repeat left;
}

.site-description {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
}

.site-description,
.site-title {
	margin-bottom: 0;
}

.header-image .site-description,
.header-image .site-title {
	display: block;
	text-indent: -9999px;
}

/* ## Widget Area
--------------------------------------------- */

.site-header .widget-area {
	float: right;
	/*width: 800px;*/
	width: 700px;
	text-align: right;
	margin-top: 17px;
}

gistfile2.css

@media only screen and (max-width: 480px) {

	.header-image .site-title > a {
		background-size: contain;
	}
}

style.css

/* ## Fixed Mini Header appearing on scroll
----------------------------------------------------- */

.mini-header {
	position: fixed;
	width: 100%;
	z-index: 999;
	top: 0;
	display: none;
	background: rgba(255, 255, 255, 0.95);
	border-bottom: 1px solid #f5f5f5;
}

.admin-bar .mini-header {
	top: 32px;
}

.mini-header .alignleft {
	margin-top: 12px;
}