Set a Module to be Sticky in a column

Beaver Builder
6

Hi Carlos,

So Ben jumped in and got this working for you. I added the code to your page and it appears to be working fine. Please, see the sidebar whilst you’re not logged in, as the WP Admin Bar throws the script out slightly as it pushes the sticky navigation down several pixels.

For anyone else interested, I have added the code and instructions below.

  1. First, you’re going to need to open the settings for the module you want to be “sticky/fixed”.
  2. In the Advanced tab, scroll down to the ID option and add stickysidebar and save the settings.
  3. Now close the Page Builder and open up the Customizer and navigate to Code > JavaScript code.
  4. In there add the following JS:
jQuery(function() {
    var offset = jQuery("#stickysidebar").offset();
    var topPadding = 15;
    jQuery(window).scroll(function() {
        if (jQuery(window).scrollTop() > offset.top) {
            jQuery("#stickysidebar").stop().animate({
                marginTop: jQuery(window).scrollTop() - offset.top + topPadding
            });
        } else {
            jQuery("#stickysidebar").stop().animate({
                marginTop: 0
            });
        };
    });
});

You may want to play around with the var topPadding = 15; value, especially if you have your navigation set to stick. For Carlos we set this value to 65 so the sticky element/sidebar was just below the sticky navigation.

Thanks,
Danny