Create a Split Screen Scroll Effect with Sticky Element

Is there a way to achieve this in blocs? I want to be able to do this but not have a permanent sticky element. I want to be able to have the element move up after a few scrolls. As always I appreciate anyone’s guidance.

Example:

1 Like

You can make this in Blocs using sticky on the element that needs to stick.


The big trick with using .sticky-top (These are the bootstrap classes) is that sticky is broken by overflows being set on the parent.

So to solve that and to make it work in Blocs you need to add this to the Code editor CSS input zone…


CleanShot 2024-02-07 at 15.08.43@2x

Sticky items, are cool. But you do have to get your head around how the CSS works. It makes it was easier.

3 Likes

@PeteSharp

Thanks Pete. Is there a way to a have a whole section/block stick after a few scrolls? Then have the next bloc over lap that when scrolling? Not just on an element.

An effect like this? I prototyped this the other week to update the Blocs Builder website, which I haven’t really spent much time on. This is using position sticky.

1 Like

Yes, exaclty that!

1 Like

Position sticky and top edge 0 on the block.

Don’t forget that bit of css I mention above to stop sticky potentially breaking

@PeteSharp

On the element or block I wan to stick, I give it a class name of .sticky-top or do I name it .page-container?

All the content of the exported page is in a div with the class .page-container. We are just fixing it for anything inside for sticky. So you don’t have to do anything else with that.

You can use sticky on an entire bloc or a div.

On my prototype I intially used divs. Then I changed it to blocs. Works the same. Just less mess

@PeteSharp

I really appriciate the assistance. I’ll do some testing and see what I get. Thanks.

1 Like

Might be it from me today. I’m only on my phone now. After a 4 day weekend (public holidays) it’s a slow start back into it. I’m baking a cake now :joy::rofl::cake:

Haha enjoy!

1 Like