[kowalsmeParticipant]

Hello,
I would like to make my sidebar a “sticky” sidebar, so that the body content scrolls, but the sidebar sticks to the header and remains on the page. I followed the CSS+Javascript recommendations from this post: https://community.theme.co/forums/group/support-center/ but it isn’t working. Ideally we could have some sort of scroll then stick, similar to this experience: http://abeautifulmess.com/ but a standard sticky sidebar would be fine.

I am using the ethos theme.
my site: http://andthenwetried.com/

thanks

[Nabeel AModerator]

Hi there,

Thanks for writing in! Try adding the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

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

Then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

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

Before adding the code you’ve a syntax error in your Appearance > Customize > Custom > Edit Global Javascript, remove the code first and then add the above code otherwise it won’t work.

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

[kowalsmeParticipant]

thanks! I made the following modifications to have the width match my sidebar width non-scrolled and to have this only impact the homepage sidebar in case anyone else is reading this:

Appearance > Customize > Custom > Edit Global Javascript

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

Appearance > Customize > Custom > Edit Global CSS:

@media (min-width: 979px) {
  .stick {
    margin-top: 0 !important;
    position: fixed;
    top: 165px;
    right: 0 !important;
  margin-right:3%;
    z-index: 10000;
  width: 30%;
}

.stick .widget_text, .stick .widget_categories {
    width: 80%;
}
}

thanks for your help!

[Rue NelModerator]

Hello There,

You’re welcome! We’re happy to help you out.
If you need anything else we can help you with, don’t hesitate to open another thread.

Best Regards.

[kowalsmeParticipant]

How can I make this not overlap the footer?

see: http://andthenwetried.com/

[RupokMember]

Hi there,

We’ll follow up on your support ticket. Let’s consider this as closed.

Cheers!

[Author]

Posts