Make a GenerateBlock sticky on scroll

Hi there,

with CSS like this:

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

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

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

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!

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.

Nope.

Made an edit to the code here

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

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

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.

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

David, thank you so much.

You're welcome

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