[Resolved] How make a block which replace right sidebar to stay sticky on scroll?

[Marcel]

Hello and congratulations for the best ever version of GPP (testing the beta version 1.11.0-rc.1).
So, I have created a new Element (Block – Right sidebar), and now I would like to make it fixed on the scroll. To explain better, when using the default sidebar, you can make a widget to be fixed with Q2W3 Fixed Widget plugin for example or you can use a CSS snippet to make the last widget sticky.
How to proceed in this specific case with the Block Element which replaces the right sidebar?
Thank you and CONGRATULATIONS AGAIN!
Marcel

[David]

Hi there,

thanks for the feedback – its much appreciated.

Can you share a link to your site so we can look at a CSS Solution – edit your original topic and use the Site URL field to share a link privately.

[Marcel]

Thank you, David.
I’ve shared the link privately.The case of the Block element is on the home page.

[David]

Try this CSS:

#right-sidebar {
    position: -webkit-sticky;
    position: sticky;
    top: 60px; /* offset from top of screen on scroll */
}

[Marcel]

Perfect. It works. I suppose this snippet makes the entire right sidebar to stay sticky.
One more question: would it be possible just the last block element in the right sidebar to stay sticky? I’ve added one more block just for testing/ learning reason.

[David]

Use this CSS instead:

@media(min-width: 768px) {
    .right-sidebar .site-content {
        display: flex;
    }
    .inside-right-sidebar {
        height: 100%;
    }
    .sticky-block {
        position: -webkit-sticky;
        position: sticky;
        top: 60px;
    }
}

And give the block a CSS class of sticky-block

Noticed you’re using a Cover Block … have you tried out GenerateBlocks yet?

https://generateblocks.com

[Marcel]

1. Of course, I use GenerateBlocks

2. I am not sure if I proceeded correctly:
– here is where I’ve added the CSS Class to the last block: https://prnt.sc/tv86r9
But no block in the right sidebar is sticky now. Maybe I’ve done something wrong?

[David]

1. 🙂

2. Made a typo – updated the CSS here

[Marcel]

David, you are a genius.
Thank you for your outstanding support!
The GP team is the best of the best. EVER.

[David]

You’re welcome – glad to be of help

[David]

Thanks Marcel and David for this. Your ongoing discussion and solutions sorted out a problem I came across today.

I decided I wanted a sticky fixed widget on a specific review post I did without showing any of my usual right sidebar widgets. Marcel’s idea of using a block to replace the right sidebar along with David’s CSS did the trick for me.

Thanks.

[David]

Awesome – really glad you found this useful !

[Brajmohan Kumar]

Hi,

/*Make sidebar sticky*/
@media (min-width: 769px) {
    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
}

Above CSS works for this site: https://www.boatengine.com/blogs/

But the same CSS doesn’t work for another site, i.e. https://myfreedomaffiliates.com/blogs/

For this site I used:-

/*Make sidebar sticky*/
@media(min-width: 769px) {
    .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 80px;
    }
}

Why different CSS for the site built with Genratepress? What’s the difference between those two?

Thanks!

[David]

I’m not a GeneratePress support person. I use GeneratePress. I’m not a professional CSS person.

I think you should add the the .sticky-block element as a separate element as per David’s CSS code earlier in this discussion. Then specify in the block (WordPress Dashboard -> appearance -> elements -> the applicable block) to use a div class called sticky-block.

In one case in your css code above, I noticed that the #right-sidebar element is used and in another it is called .inside-right-sidebar. Make sure that the correct element is used.

When using GeneratePress element blocks (WordPress Dashboard -> appearance -> elements), make sure that the display rules for that element are specified and that the element itself is actually published otherwise it will just use the sidebar as specified in the standard widget section (WordPress Dashboard -> appearance -> widgets).

I find when working with things like this I need to clear the cache before testing latest changes.

If you are able to sort out the issue with the above suggestions let us know by replying. No need for others to add to this if it is already solved. 🙂

If not, also let us know by replying. I can’t help further in this instance, but maybe someone else will be able to help.

Good luck.

[David]

Hi there,

Site one is using the older Grid Structure in GP, that uses Floats.
Site two is using the newer grid system that uses Flexbox.

The grid structure can be changed in Customizer > General.

The fundamental differences is because how position: sticky; works.
For an element to Stick, it has to have a smaller height than its parent container, in both cases that is the #content.
The height of the #content will be defined by the tallest element within it. In this case your #primary content has the greatest height.

The difference between Float and Flexbox:
When using Floats, the #right-sidebar elements height is based on the size of ITs content, so its smaller then the #content container and can scroll up and down when sticky.
Whereas when using Flexbox the #right-sidebar fills the height of the #content so has no room to scroll, hence we then apply the position sticky to ITs inside-right-sidebar container, as its height is based on ITs content.

[Author]

Posts