Streaming live at 10am (PST)

How can I achieve these scroll breakpoints at

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

position: -webkit-sticky !important;
position: sticky !important;

Check out this demo I made for you:

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:

Hope it helps and happy designing :grinning:

Edit: here’s how to add custom come:


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



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.