Streaming live at 10am (PST)

Half scrolling site layout

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!!

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?

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?

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?

2 Likes

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

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;
}

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

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

2 Likes

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!

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:

Hi @jorn, I know this is a bit of an old post now. I’m wondering if I need custom CSS to achieve your split screen scrolling page: http://sidebar-scroll.webflow.io/

Or whether I can achieve this just using the newish sticky function

Hey @Jun Great question and welcome to the forum :grinning:

At the time I built that one you needed custom CSS code but not any more.

I’ve updated the project removed the custom CSS code so it’s now all Webflow.

The trick is here:

Here’s the read only if needed:
https://preview.webflow.com/preview/sidebar-scroll?utm_medium=preview_link&utm_source=designer&utm_content=sidebar-scroll&preview=033e2e6af74e4dc44516632728f7acbb&mode=preview

Let me know if this was helpful or not.

Kind regards,

Jörn :sweden:

Thanks so much for getting back to me Jorn!

I’ve used another method in the meantime, which seems to work well too - using columns within sections. (See post here: Split Screen Layout - Half Sticky, Half Scrolling)
Would you recommend one over the other?

The next issue I have is pushing up the sticky half with the content below as it is scrolled up the page. I tried to replicate your design above but couldn’t get the same result

I have this oen as well =)
http://up-down.webflow.io/

Preview:
https://preview.webflow.com/preview/up-down?utm_medium=preview_link&utm_source=dashboard&utm_content=up-down&preview=48420eec3078837b42dcc28cd490413a&mode=preview