WSC 5.2 - Following sidebar

Yachtie · Jan 21st 2020

Hello everyone!

How can I make the right sidebar to follow to the end of the page?

e.g the content is longer than the sidebar, so it will follow while scrolling down to the end of the page

all the best!

Black Rider · Jan 22nd 2020

You could do this by setting the sidebar to sticky:

CSS

.sidebar {
    align-self: flex-start;
    position: sticky;
    top: 50px;
}

Yachtie · Jan 22nd 2020

Works!! Thank you so much!

Yachtie · Jan 23rd 2020

Is it possible to disable this in mobile view?

Black Rider · Jan 23rd 2020

Just surround the code above with the following:

CSS

@include screen-lg { }

Yachtie · Jan 23rd 2020

Now it's perfect! Thank you!

AdonisDoge · Aug 16th 2021

Is this no longer working in WSC 5.4?

Code

@include screen-lg {
    .sidebar {
        align-self: flex-start;
        position: sticky;
        top: 50px;
    }
}

Black Rider · Aug 17th 2021

I can’t see any problem in my 5.4.

AdonisDoge · Aug 17th 2021

It’s not doing anything in mine for some reason..

Black Rider · Aug 17th 2021

Is there any live demo where I can have a look at it?

And is your content longer than your sidebar?

AdonisDoge · Aug 17th 2021

Sure, I’ll send you the details in private

Black Rider · Aug 17th 2021

Your .pageContainer has an overflow-x: hidden;. That automatically results in an overflow-y: auto; and will prevent position: sticky; from working.

No ancestor is allowed have a value of auto, hidden or scroll for overflow.

AdonisDoge · Aug 18th 2021

Not really sure about what you just wrote lol is it something that has to do with the theme?

If so, I can contact the developer and see if it’s possible to change!

Thank you so much for having a look at it!

Black Rider · Aug 18th 2021

Yes, it’s related to your used style. Just forward this thread to the creator, I’m sure he will understand the problem here.

AdonisDoge · Aug 18th 2021

Thanks so much! And sorry again for opening a post on woltlab.com