How can I achieve these scroll breakpoints at https://webflow.com/customers/heco

Specifically, as you scroll down the page the scroll bar hits two columns, scroll stops on left col until right col finishes, then the entire row scrolls down to next section normally. I like this type of effect, and it would be useful for my portfolio section.

How is this done (loaded question, I know!) but I’m hoping it is just a matter of including a few lines of custom code, unless it is done entirely using interactions 2.0, in which case, that’s even better.

Note, I’m not really interested in the horizontal scroll hi-jack, but the vertical scroll breakpoints.

Here is the example;

Hi there

They’re using some custom code, css position: sticky

<style>
.left-inner{
position: -webkit-sticky !important;
position: sticky !important;
}
</style>

Check out this demo I made for you:
http://sidebar-scroll.webflow.io/
http://sidebar-scroll.webflow.io/home2

The element you want sticky need to be relative and you need to set a top margin, 0 if you want.

Here’s my preview:
https://preview.webflow.com/preview/sidebar-scroll?preview=fb74a643d12a4324d9e04050cb4daaa9

Hope it helps and happy designing :grinning:

Edit: here’s how to add custom come:

2 Likes

Thanks for such a detailed reply, it’s way more than I expected. That’s really super helpful! :clap::clap::clap::clap:

Do you mind making it clone-able? I’ll stick it in my components folder for future reference.

Thanks :slight_smile:

1 Like

Done!

https://webflow.com/website/sidebar-scroll?s=sidebar-scroll

2 Likes

Thanks man, really appreciate it!

1 Like

Glad I could help. I learned as well :grin:

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.