Custom Mobile Layout

Design help General
1

Hi,

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.

Capture d’écran 2020-05-25 à 19.11.31
Capture d’écran 2020-05-25 à 19.11.311946×1466 262 KB

Surely something easy to solve but can’t find the solution on my own

Thanks

2

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?
https://gilsons-amazing-project-9c96d3.webflow.io/

3

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 ?

4

You can use a simple structure like the following:

<section class="past-section"></section>
<section class="sticky-wrapper">

  • <div class="sticky-content"></div>
  • <div class="A"></div>

</section>

<section class="B"></section>
<section class="next-section"></section>

It’s important to give the sticky-wrapper position: absolute

5

I’ll try soon.
Do you have the webflow read-only project to see the layout ? I am not a developer…

6

Sure!

https://preview.webflow.com/preview/gilsons-amazing-project-9c96d3?utm_medium=preview_link&utm_source=dashboard&utm_content=gilsons-amazing-project-9c96d3&preview=6b7727fdad0e5c7150ace16ac26d756f&mode=preview

7

Thanks !
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.