Set a Module to be Sticky in a column

Hello guys!

I am trying to make the contact box to be always visible as the user scrolls down. I have the column to be the same height as the other one, so that the “row” to slide goes all the way down.

I found this link https://css-tricks.com/scrollfollow-sidebar/ and I added the following code for javascript in the layout settings with no luck:

$(function() {

    var $sidebar   = $(".fl-node-569429df64579"), 
        $window    = $(".fl-node-56942ec986b7d"),
        offset     = $sidebar.offset(),
        topPadding = 15;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                marginTop: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                marginTop: 0
            });
        }
    });
    
});

Could you please help me with this?

Thank you!

[Content Hidden]

[Content Hidden]

Hi Carlos,

Can you provide temp admin access to your site, so we can take a closer look. Also, I am not seeing the CSS to set that module to position fixed. Did you add the CSS?

Thanks,
Danny

[Content Hidden]

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

I have a question about this issue. I followed the steps outlined above with a test module of just text and I noticed that the resulting module simply pushes the content below it farther down the page as I scroll instead of floating in front of it. Is there a way to fix this?

1 Like

Hey Benjamin,

The stickysidebar element needs to be on its own column so it can freely move vertically. Can you share the URL of the page you’re playing around with so we can check?

Ben