I would like to make a custom layout for the mobile version of my site.
The idea is to use the 100vh space divided into 2 content area:
- the top (60vh) is sticky and used as a space to show images
- the bottom (40vh) is scrollable and used as a space to show text
I would like to give that layout the following behavior but at the moment, I can’t have the steps 3 and 4 working properly. The sticky moves when the next section hits it’s bottom which is not what I want.
Surely something easy to solve but can’t find the solution on my own
Hey @martinreboux can you elaborate a little bit more?
I couldn’t quite get what you want. The figures 1 and 2 are clear. But 3 and 4 are confusing, even with the image.
Sticky Content is 60vh and sticks
A scrolls into view right bellow the Sticky Content. But when Sticky Content reach the top of the page it sticks and A keeps scrolling behind it.
B comes bellow A and does not scrolls behind Sticky Content.
Is this what you want?
That is exactly what I am looking for !
I struggled to make the next section “push” B and the sticky content in the same time.
What I have is B scrolling below the sticky content and then, when the next section hits the bottom of the sticky content, it moves upward.
So how did you archived your layout ?
You can use a simple structure like the following:
It’s important to give the sticky-wrapper
I’ll try soon.
Do you have the webflow read-only project to see the layout ? I am not a developer…
I managed to archive what I was expecting. I had to tweak your layout a bit but it works.
Now I need to make it work for more than 2 different bottom content. Should be quite the same I assume.