Sticky sidebar which doesn't overlap footer

[Alex_H1]

Hi,

I followed your advice to make a sidebar sticky at https://theme.co/apex/forums/topic/ethos-theme-sticky-sidebar/, but it overlaps with the footer. How do I get the sidebar to ‘stop’ when it hits the footer?

A

[ruenel]

Hello There,

I went to check the sites assigned to your license codes and I could not find the correct site. To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks.

[Alex_H1]

Hi!

http://rugby4cast.com/analysis/south-africa-v-argentina/ is what I am referring to - I would like to make the sidebar sticky but for it to stop when it hits the footer!

Alex

[ruenel]

Hello Alex,

To resolve your issue, please make use of the following code:

###JS code

function sticky_relocate() {
    var window_top = jQuery(window).scrollTop();
    var div_top = jQuery('.x-main').offset().top;
    if (window_top > div_top) {
        jQuery('.x-sidebar').addClass('stick');
    } else {
        jQuery('.x-sidebar').removeClass('stick');
    }
}
(function($) {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
})(jQuery);

###CSS code:

.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 20px;
    right: 0 !important;
    z-index: 9998;
}

.x-colophon {
    z-index: 9999;
}

We would loved to know if this has work for you. Thank you.

[Alex_H1]

Hi,

The menu is successfully sticky and no longer overlaps the footer (because of the z-index changes); it now disappears behind the footer.

However, this is not what I was hoping for: I don’t want it to simply disappear behind the footer, I want it to ‘stop’ before it ‘hits’ the footer, if that makes sense…

I.e. I don’t want it to disappear like this…

I want the maximum it can go down to to be like this…

Hope that makes sense!!

[christian]

Hey Alex,

Before giving the answer, I’d like to clarify first that this feature is not a feature offered by X nor Pro and though it’s possible using custom code, this does not mean that we could always provide custom code nor fix and enhance the code we gave because that is not sustainable.

With that said, I will not continue on providing support for the custom code. But, I will show you an alternative using a third party plugin. See https://youtu.be/Kp5Ykoz51kc

Just note though that like custom code, we do not have support for third party plugins in case you encounter issues with it and/or will need an enhancement. For that, you will need to contact the plugin developer.

The video that I showed you only serve as a guide. There might be better alternative plugins out there. This is just showing you a possibility.

Hope that helps and thank you for understanding.