Lego2012
12/13/2016 - 2:59 PM

Multiple Sticky Widgets

Multiple Sticky Widgets

<?php
//* Do NOT include the opening php tag shown above. Copy the code shown below.

<!-- non-handhelds.js.: -->

jQuery(function( $ ){

    $( "#search-4" ).stick_in_parent();

    $( "#recent-posts-3" ).stick_in_parent({
        offset_top: 136 // height of search widget i.e., the sticky widget above this
    });

});

<!-- functions.php: -->

// Enqueue Scripts and Styles
add_action( 'wp_enqueue_scripts', 'sk_enqueue_stuff' );
function sk_enqueue_stuff() {

    // Load Sticky Kit on non-handhelds
    if ( wp_is_mobile() ) {
        return;
    }

    wp_enqueue_script( 'sticky-kit', get_stylesheet_directory_uri() . '/js/jquery.sticky-kit.min.js', array( 'jquery' ), CHILD_THEME_VERSION, true );

    wp_enqueue_script( 'non-handhelds', get_stylesheet_directory_uri() . '/js/non-handhelds.js', array(), CHILD_THEME_VERSION, true );
}

<!-- style.css: -->

.admin-bar #search-4.is_stuck {
    margin-top: 32px;
}