For a few months now I've almost switched to 100% on the Beaver Builder. The decisive point was actually the "Pagebuilder Performance Test" that I have performed. It showed quite clearly how big the performance differences between the different pagebuilders are and that unfortunately my previous favourite - the Divi Builder - could only occupy a place in the lower middle field.

In the near future there will be a very detailed test about the Beaver, but I will start with some information and tips that I get during my daily work and I am of the opinion that they can be as helpful for you as for me.

Today we are going to talk about the topic "sticky fissures" - somehow it doesn't sound quite round in German or somehow unusual. "Sticky Sidebar" sounds more familiar, but this is really about a column / module that was created with Beaver Builder.

The following example scenario Scenario: We want to create a page with the Beaver Builder and display a table of contents or a button or offers on the right side that scrolls along with the text - i.e. "Sticky". In my case "Alf" takes over the sticky position.

To let the column with Alf now scroll along we have to do 2 steps. First we have to give the column a CSS ID and then we add a small JS that assigns the appropriate sticky function to the CSS ID - here we go

1. assign CSS IDD for the column

We open the "Settings" of the right column (via the wrench) and select the tab "Advanced". There we scroll down to the item ID and enter an individual CSS class - in our case sf_sticky

Saves the whole thing and closes the window.

Installation of the JavaScript code

To do this, we open the Beaver Builder's settings options for a page in the upper left-hand corner and open the "Layout CSS & JavaScript.

In the tab JavaScript (not CSS!) we now enter the following js code:

jQuery(function() {
    var offset = jQuery("#sf_sticky").offset();
    var topPadding = 15;
    jQuery(window).scroll(function() {
        if (jQuery(window).scrollTop() > offset.top) {
            jQuery("#sf_sticky").stop().animate({
                marginTop: jQuery(window).scrollTop() - offset.top + topPadding
            });
        } else {
            jQuery("#sf_sticky").stop().animate({
                marginTop: 0
            });
        };
    });
});

Save the whole thing, publish it and your right column is "Sticky".

This option is also nice if we want to create a page and have a table of contents "scroll along" with it.

Have fun testing and stay healthy!

About Christian

My name is Christian and I am co-founder of the platform fastWP. Here in the magazine I am responsible for the more "technical" topics but I like to write about SEO, which has been my passion for over 10 years now.

Leave a Comment

Your email address will not be published. Required fields are marked *

en_GB