How to make site sections collapse on scroll

Not sure if this requires custom code or not, please lmk if there’s an easy way to do this!

Our designer created a cool idea of collapsing the sections down when scrolling but still showing section titles (see pic). Is there a straightforward way to do this? The designer is out for the next few days so hoping we can make some progress while he’s out!

Also, I’d like the Denbigh Group title (as seen on our site) to push up to the top in between the logo and Contact Us button if possible so it’s always on screen. :)


Here is my site Read-Only: Webflow - Denbigh Group

Hi again Shelby,

For some reason I did not see the cards stacked as shown from your provided screenshot. Probably you have made some changes while we are checking.

However, if you want to achieve something like on the example, you can do it with Webflow’s interaction and no need for a custom code. For the cards to push up a little bit hiding the title and the logo, you can add a unique combo class identifier for ‘Company’ cards (which already had, such as ‘Capital’, ‘Properties’, ‘Ventures’ but some cards have missing combo classes). Then add a negative margin of each card with unique combo class, you may need to play around of what size the negative margin would be until you see your desired output.

The image I’m showing is from Figma, I have yet to get this to actually work in Webflow - but thanks, I will try your suggestion!!

1 Like

I’ve done something similar for a site I’ve built. I used the Sticky Alignment and set each card at a higher distance from the amount it sticks.

image
image

Once it scrolls past 150px from the top of the body, it will stop moving. The following card will stop moving at 160px. You’ll have to tinker with those numbers to figure out what suits your needs best. Just be sure to change the Z-Index so they stack properly.