▼
Streaming live at 10am (PST)

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

#1

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

Creating a half-scrolling area
#2

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

#3

Hello, @sabanna

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

best regards
Chris

#4

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

#5

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

#6

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

#7

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

Half scrolling site layout
#8

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

#9

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

#10

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

#11

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%

#12

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

#13

Hi Sabanna,

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

Chris

#14

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