Lego2012
12/13/2016 - 4:07 PM

Slide down fixed secondary navigation after scrolling down

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();
    });

});