Sridhar Katakam

Genesis and WordPress Tutorials

How to setup sticky elements on scroll in WordPress using Stickybits

by Leave a Comment

In the past, I’ve written about using Sticky-Kit to stick elements as they are scrolled past.

In this tutorial I show how Stickybits can be used for the same, specifically to make the primary nav sticky for screen widths > 1023px in Genesis Sample.

While the tutorial has been written for Genesis Sample, it should work in any WordPress theme with minor modifications

Step 1

Upload jquery.stickybits.min.js to child theme’s js directory.

Step 2

Create a file named say, stickybits-init.js in the same location having this code:

jQuery(function($){

    if ( $(window).width() > 1023 ) {
        $('.nav-primary').stickybits({
            useStickyClasses: true,
        });
    }

});

Step 3

Add the following in child theme’s functions.php:

// Enqueue Stickybits and initialize it.
add_action( 'wp_enqueue_scripts', 'sk_load_stickybits' );
function sk_load_stickybits() {
    wp_enqueue_script( 'stickybits', get_stylesheet_directory_uri() . '/js/jquery.stickybits.min.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
    wp_enqueue_script( 'stickybits-init', get_stylesheet_directory_uri() . '/js/stickybits-init.js', array( 'stickybits' ), CHILD_THEME_VERSION, true );
}

Step 4

Add the following in child theme’s style.css:

.nav-primary.js-is-sticky {
    border-bottom: 1px solid #eee;
}

.admin-bar .nav-primary.js-is-sticky {
    top: 32px !important;
}

Reference:

https://css-tricks.com/stickybits-alternative-position-sticky-polyfills/

>