Skip to content

Instantly share code, notes, and snippets.

@srikat srikat/sticky-nav.js
Last active May 9, 2017

Embed
What would you like to do?
add_action( 'wp_enqueue_scripts', 'custom_enqueue_script' );
function custom_enqueue_script() {
wp_enqueue_script( 'sticky-nav', get_stylesheet_directory_uri() . '/js/sticky-nav.js', array( 'jquery' ), '', true );
}
.nav-secondary {
background-color: #333;
border-bottom: 1px solid #111;
border-top: 1px solid #111;
clear: both;
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
.admin-bar .nav-secondary {
top: 28px;
}
.nav-secondary .genesis-nav-menu a:hover {
color: #fff;
}
.nav-secondary .genesis-nav-menu li li a:hover {
color: #000;
}
.menu-secondary > li:first-child a {
background: url("images/fixed-menu-logo.gif") no-repeat center center;
margin-right: 10px;
margin-right: 1rem;
text-indent: -9999px;
width: 180px;
}
jQuery(function( $ ) {
var starting_position = $('.site-header').outerHeight( true ) + $('.nav-primary').outerHeight( true );
$(window).scroll(function() {
var yPos = ( $(window).scrollTop() );
if( yPos > starting_position && window.innerWidth > 500 ) { // show sticky menu after these many (starting_position) pixels have been scrolled down from the top and only when viewport width is greater than 500px.
$(".nav-secondary").fadeIn();
} else {
$(".nav-secondary").fadeOut();
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.