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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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 */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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 !

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts