Streaming live at 10am (PST)

Half on half layout in sections – one half scrolling other one static

Hi there,

I found this site: https://sapdesign-sandbox.webflow.io/half-on-half-layout
and it is exactly what I’m looking for.
A website in sections – one half fixed and the other one scrolling to its end and then both scrolling to the next section.
From the persona icon in the menue it might be page of @sabanna – unfortunately I did not find any topic/issue in the forum.
Maybe there is already something here I missed? Or someone can give me a hint how it was build.

Thank you
Chris

Hello, @cholt-freib

Yes, it is my sandbox :slight_smile:
I can give you the read-only link and you will see how it built. And sure feel free to ask any questions

Regards,
Anna

Hello, @sabanna

thank you for replying so fast.
And yes, it would be great to have a look at it.

best regards
Chris

Here we go:
https://preview.webflow.com/preview/sapdesign-sandbox?preview=485541288f79c6ab0e1f05628af56cb7

1 Like

Hi Sabanna,

I tried to buid it myself and found out you used 3 layers (fixed, bottom, “standard”) from which fixed and bottom are set to display “none” how do you switch between those 3 – do you use Interactions?

best regards
Chris

Hi, Chris.

Yes, there is interaction, connected to the “div-half white” (the div with the text or images). It reacts on scroll and affects “fixed” and “bottom” divs

Hi Sabanna,

thanks for the hint. Got it now, but my page is only scrolling when I’m over the right scrolling section. Yours is scrolling no matter where the mouse is … maybe you can help me again?

regards Chris

Will be glad to help if you will give me the read-only link :slight_smile:

Thank you.
Here you are:
https://preview.webflow.com/preview/testscroll-b31b8c?preview=d166108bd303b5889ab51683eaac78b1

The div with text should be height: auto :slight_smile:

Yet you have to pay more attention to the settings.

  1. fixed div should have position: fixed, not absolute
  2. in the interaction scroll offset should be 100%

Its all in the details :sweat:
Thank you for your sharp eye :relieved:

1 Like

Hi Sabanna,

thanks again. It has also a good effect with picture included.
A first mockup: http://gisingerscroll.webflow.io

Chris

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