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

Home Forums Support How make a block which replace right sidebar to stay sticky on scroll?

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1389464
    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

    #1389627
    David
    Staff
    Customer Support

    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.

    #1389644
    Marcel

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

    #1389649
    David
    Staff
    Customer Support

    Try this CSS:

    #right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 60px; /* offset from top of screen on scroll */
    }
    #1389718
    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.

    #1389742
    David
    Staff
    Customer Support

    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

    #1389839
    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?

    #1390116
    David
    Staff
    Customer Support

    1. 🙂

    2. Made a typo – updated the CSS here

    #1390200
    Marcel

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

    #1390327
    David
    Staff
    Customer Support

    You’re welcome – glad to be of help

    #1437045
    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.

    #1437753
    David
    Staff
    Customer Support

    Awesome – really glad you found this useful !

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.