Custom Mobile Layout


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:

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

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


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

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

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


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.