Streaming live at 10am (PST)

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


#1

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;


#2

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:


#3

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:


#4

Done!


#5

Thanks man, really appreciate it!


#6

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


#7

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