How to Create Bottom Sticking Cards Sections

Design help General
1

Hello everyone!

I am trying to create something similar with what shopify has done on their landing page: https://www.shopify.com/editions/winter2023 , scrollable sticky section that overlaps the section before it, something like stacking cards section, but the section doesnt need to stack, they just need to go one in front of the other as you scroll the site. I also saw this possible on a template, but it only worked with 100vh section, i need longer section, that you can scroll and that become sticky at the end of it.

I think for this to work the section should be sticky at bottom, so when you finished scrolling it, it should stop at the lowest point and the next section should come in front of it, but i can not figure out how to make the section sticky at bottom.

I tried to make the section sticky, with 0px at bottom, but nothing happends, you have my read-only link below so you can check out on my demo page.

Here is my site Read-Only: Webflow - Radu's Awesome Site

Any help is much appreciated! Thanks!

2

Hey !
I have the same exact problem, also tried the 0px bottom sticky section but it doesn’t work either…
Did you find a solution yet ?

3

You might have misunderstood a little, position: sticky is exactly what you should apply but if you want to keep that hero section on top you should apply top: 0px not bottom: 0px

When top: 0 is applied, it will stick to top and sections below that will go over it but when bottom: 0 is applied, it will stick to bottom and section above it will go over it.

And one thing to remember is that any parent element should not have overflow: hidden or else position: sticky won’t work.