Sticky Side Bar

Beaver Builder
1

I have added the code suggested in this post, although my issue is that the module continues to slide down the page hiding the rows below it. Is it possible to force it to spot at the bottom of it’s column?
Thanks

Link to post:

  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
            });
        };
    });
});
2

What about using position : sticky ?

3

What do you mean? How do I add this?

Thanks!

4

So if I wanted to turn this off on mobile devices, how would I modify the js (or would I use css) to stop it from animating/floating the sidebar?