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.

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.

Adding the custom CSS class

Adding the custom CSS class

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.

Layout CSS and JavaScript

CSS

JS

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?

Share this Tutorial

4 Comments

  1. David Innes on January 8, 2020 at 6:24 pm

    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.

    • Chinmoy Paul on January 8, 2020 at 6:57 pm

      Very Welcome David. Glad you found this useful.

  2. nate simpson on January 9, 2020 at 12:13 am

    great walk thru!

  3. Graham Davies on January 9, 2020 at 4:54 pm

    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.

Leave a Comment