Slide down fixed secondary navigation after scrolling down
/* ## Fixed secondary nav appearing on scroll
----------------------------------------------------- */
.nav-secondary {
position: fixed;
width: 100%;
z-index: 999;
top: 0;
display: none;
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #c4c4c4;
}
.admin-bar .nav-secondary {
top: 32px;
}
<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.
//* 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( $ ){
// grab the initial top offset of the navigation
var sticky_navi_offset_top = $('.site-inner').offset().top;
// our function that decides whether the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scroll_top > sticky_navi_offset_top) {
$('.nav-secondary').slideDown();
} else {
$('.nav-secondary').slideUp(200);
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});