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.
- Create a “js” (case-sensitive) folder inside your theme folder
- Create a new file “jquery.sticky.js” and save into this “js” folder
- Click on this link
- Copy the full code and paste into “jquery.sticky.js” file
- 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?