Sticky menu for WP custom menubars

What you could do is the following:

1) Make a javascript-file and put the following content into it:

$(function(){
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function(){
        if( $(window).scrollTop() > stickyHeaderTop ) {
            $('#stickyheader').css({position: 'fixed', top: '0px'});
        } else {
            $('#stickyheader').css({position: 'static', top: '0px'});
        }
    });
});

2) Save this file in your theme folder as (for example) stickyheader.js.
3) Put the following code in your theme’s functions.php:

do_action( 'after_setup_theme', 'wpse101288_enqueue_script' );

function wpse101288_enqueue_script() {
    wp_register_script( 'stickyheader', get_template_directory_uri() . '/stickyheader.js', array( 'jquery' ) );
}

4) Put the menu you want to get “sticky” between te following code:

<div id="stickyheader">/* YOUR MENU CODE HERE */</div>

or even better, add id="stickyheader" to the existing element in wich your menu is located.

Related Posts: