Streaming live at 10am (PST)

Half scrolling site layout


#1

hello @sabanna

I was trying to do a half-&-half scrolling layout but I wasn’t able to get scrolling to work. I was referring to your forum posts here but I can’t seem to get the scrolling interaction to work be triggered anywhere on the page (my content only scrolled when I was on the right-hand div with text).

My first version, I was able to get the left div to stay but the scrolling was a bit off. LINK (under article template pg): HERE

My second version, I was able to get the scroll to trigger anywhere on the page but the div-half (left) is stuck. LINK (under article template pg): HERE

Would greatly appreciate any help you can provide to point out what I’m doing wrong? :frowning: Let me know if you need any clarification!

Thank you!!


#2

Hi

I don’t understand exactly what your after but I did this the other week to try an idea out.
http://up-down.webflow.io
Made with collections.

Is something like that you’re aiming for?


#3

Hi @jorn!

Thanks for getting back to me! Sorry if I wasn’t clear!

Ultimately the effect I’m trying to create something similar to these:

However, I’ve not been able to achieve that sort of absolute positioning of the static div and having a full-width section after the split-div section.

The closest reference I managed to find achieving that on webflow was from @sabanna’s sandbox. Which resulted in the problems various problems I encountered in the 2 read-only link I sent.

Edit: I would like to know if I’m on the right path at all or should I have done something differently from the start, or how should I properly go about achieving that half-scroll layout I linked above thru webflow?


#4

The okreal is easy to do check this one out:
http://sidebar-scroll.webflow.io
Preview: https://preview.webflow.com/preview/sidebar-scroll?preview=033e2e6af74e4dc44516632728f7acbb

The Aiga example was what I was aiming for with my first example but couldn’t pull it off with collections anyway.

To have something stick while scroll you need the css sticky property.
https://caniuse.com/#search=sticky
More here: https://css-tricks.com/position-sticky-2/

Does it help?


#5

Hello, @tchoke!

As @jorn mentioned, it is easier to use position: sticky for archive the layout that you want. You also can combine it with the interactions that would make it even more advanced and create animation like in youthe 1st example you shared.

Best,
Anna


#6

Yes this is helpful! Thank you @jorn & @sabanna!

However I can’t seem to get it to work? Not very sure what I’m doing wrong :frowning:

This was the custom code I’ve placed:

.Div-Left {
position: -webkit-sticky;
position: sticky;
top: 0;
}


#7

Hello @tchoke

In CSS all classes/values should be lowercased. So you need to change .Div-Left to .div-left. It should help.

Cheers,
Anna


#8

omg, worked like a charm! thanks so so much again, @sabanna & @jorn for the help!! :sob::sparkles:


#9

Hi again! @sabanna @jorn

Sorry to reopen the thread! I wanted to check if there was a way to achieve that aiga content + image scroll with CMS? I know it’s doable with static pages, but how should I link up my classes with dynamic content/rich text blocks?

Thanks so much again!


#10

Yeah, that effect was what I was aiming for in my shared example. I wasn’t able to pull it off. I will revisit my project and see if I can solve it. Don’t get your hopes high though :blush: