[Resolved] Make a GenerateBlock sticky on scroll

Home Forums Support Make a GenerateBlock sticky on scroll

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1261124
    Marcel

    Hello,

    I would like to ask if it is possible to make, without using a plugin, a block to be sticky on scroll.
    To be more explicit, please see this image.
    The green block, on the left side (placed in column 1) should remain sticky.
    Thank you!
    Marcel

    #1261424
    David
    Staff
    Customer Support

    Hi there,

    with CSS like this:

    .my-sticky-element {
        position: sticky;
        position: -webkit-sticky;
        top: 50px; /* Offset from top of container */
    }
    #1261621
    Marcel

    I am sorry, but it does not work. I’ve read here an article about a possible issue, but I am still confused.

    #1262127
    Tom
    Lead Developer
    Lead Developer

    Any chance you can link us to the page so we can see why it’s not working?

    #1262607
    Marcel

    Hello Tom and David,
    I created a sequence on a website I have: https://bit.ly/2YnzTZF. Don’t pay attention to the width of the columns, it’s just to show the case. I do not want to use sidebars.
    I have 2 columns: A and B. I would like a block on the column A to have the same behaviour as this page on Medium.
    I made also a video: https://www.screencast.com/t/Qo3BkLaKzvgq

    Thank you!

    #1262738
    David
    Staff
    Customer Support

    It is actually working the problem is the container the sticky-element is in isn’t tall enough.
    To fix that edit the Grid Column – and give it a class of sticky-column and add this CSS:

    .sticky-column > .gb-inside-container {
        height: 100%;
    }

    This will make the inside container the height of the column.

    #1262881
    Marcel

    Nope.

    #1262889
    David
    Staff
    Customer Support
    #1262932
    Marcel

    David,

    It is working. Thank you! Now:

    1. how to align the block I made sticky at the middle of the column?
    2. how to make the first column (A) to appear on mobile devices after column B?
    3. how to proceed if I would like to hide the column A on the mobile devices?

    PS Thank you for the great support, I made a small donation in your account.

    Marcel

    #1262985
    David
    Staff
    Customer Support

    Thanks for the donation – much appreciated 🙂

    1. Hmmm…. i not sure how that would work ….. you can adjust the top: 200px; to say top: 40%; – i think I need to see an example to understand how it would work though.

    2. Select Column B – in the Settings sidebar, select Mobile, and you can change the Order to -1.

    3. Give it a CSS Class of hide-on-mobile
    https://docs.generatepress.com/article/responsive-display/#using-our-hide-on-classes

    #1263034
    Marcel

    The example would be the page on Medium. I realize it’s not the same technique, but I’d like to get something similar, at least when the sticky block would be visible for the first time. And I think the easiest way would be to align the block to the middle of the “A” column. This is certainly possible.

    #1263086
    David
    Staff
    Customer Support

    aaah ok.
    So medium is using position: fixed; which positions the element relative to the browser viewport. Which works great when your page is many viewports in length.

    Position Sticky can be used for a similar function – but remember its relative to its parent container. I used it here for the social icons:

    https://gpsites.co/liberte/bedtime-reading/

    But it doesn’t really work when relatively positioning it beside another column.

    Without any CSS you can select the Grid Block wrapper:
    https://docs.generateblocks.com/article/grid-overview/#editing-our-grid-block

    And set the Vertical Alignment to Center which will do what you require but the column itself will be aligned so no full height green background

    #1263101
    Marcel

    David, thank you so much.

    #1263396
    David
    Staff
    Customer Support
    #1470993
    Jesus Higuerey

    Is there a way to make a block only appear when the user scrolls?

    I followed the guide, the sticky block that I made shows up perfectly, but it’s quite unnecessary to load it always at the top, so I wanted to it to be hidden and then it would appear as the user scrolls down.

    Thanks

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