Make Beaver Builder row Sticky to Top on scrolling

Want to make the content of a specific row stick to the top on scrolling down page layout made with Beaver Builder? This functionality can be implemented using code from Sticky jQuery plugin. An ideal use case, when using the menu module within the layout that sticks to the top automatically on user scrolling for better visibility and good user experience.

Download & Upload Sticky jQuery Plugin

Sticky is a 3rd jQuery add-on. You can fork it on GitHub.

  1. Create a “js” (case-sensitive)  folder inside your theme folder
  2. Create a new file “jquery.sticky.js” and save into this “js” folder
  3. Click on this link
  4. Copy the full code and paste into “jquery.sticky.js” file
  5. Save the file

Enqueue Sticky JS file

Now we need to enqueue the “jquery.sticky.js” file on the website with wp_enqueue_scripts function. Open the functions.php file of your active (child) theme and add the following PHP snippet.

add_action( 'wp_enqueue_scripts', 'wpd_enqueue_scripts', 1000 );
function wpd_enqueue_scripts() {
	if( is_page( 99 ) )
		wp_enqueue_script( 'wpd-sticky-script', get_stylesheet_directory_uri() . '/js/jquery.sticky.js', array(), '1.0', true );
}

The above script is loading the JS file on a specific page with ID 99. You can replace 99 with an ID of your page or post (check other conditional tags here). If you want to load this file on the entire website, just remove the IF statement from the code.

Edit the Page with Beaver Builder

Open the specific page in the Beaver Builder mode and then click on the wrench icon to open settings of the row you want to set sticky on the scroll. Click on the Advanced tab and go to the HTML Element section then enter the wpd-sticky-row in the class input field and save the settings.

Layout CSS & JavaScript

Lastly, we need to add a few lines of CSS & JavaScript code. Click on BB Tool Bar -> Layout CSS & JavaScript menu item and enter the following CSS and JS code.

CSS

.wpd-sticky-row {
    z-index: 465677887!important;
}

JS

jQuery(document).ready(function(){
    if( jQuery('body').hasClass('fl-builder-edit') )
        return;
        
    jQuery(".wpd-sticky-row").sticky({topSpacing:0});
});

Finally, publish the page (clear cache, if any) and you should see contents of a specific row stick to the top on page scroll. Cool, right?

This site uses cookies to offer you a better browsing experience. By browsing this website, you agree to our use of cookies.