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.
|
1 2 3 4 5 |
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
|
1 2 3 |
.wpd-sticky-row { z-index: 465677887!important; } |
JS
|
1 2 3 4 5 6 |
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?
Great tutorial and code – thank you!
I’ve been waiting for this feature for so long. PowerPack, UABB, BB… No one did it. Except BB Vapor Modules Pack recently apparently. Thank you for sharing this! Have a great day.
Very good tutorial Chinmoy Paul, short and easy to follow. I’m glad you added the line to the Javascript code that stops this function working if the page is being edited by Beaver Builder, that will help me in many customisation situations.
great walk thru!
This is awesome for so many reasons! First, it’s cool to be able make any row sticky!
But more importantly, it’s the first tutorial I’ve seen that clearly explains several key concepts about WordPress in general and Beaver Builder in particular. Using a concrete example no less!
1) How to setup a 3rd-party JQuery script in the site’s files and folders
2) How to properly enqueue the script
3) How to properly use the Javascript option in the BB Tool Bar settings!
#3 has bugged me for several years as it’s tough to find examples and at least to me it’s never been clear what (which?) syntax to use in an individual page’s Javascript window.
So thanks not just for a cool website trick but for a genuinely useful tutorial.
Very Welcome David. Glad you found this useful.