Fixed image just in one section

I was trying to create a scrolling effect similar to this website: https://cacoo.com/ under “A million and one uses” . The image on left is fixed until scrolled to another section and the text on the right side is scrolling up. Must be very simple solution but I couldn’t figure it out. Any help will be appreciated. Thanks!

Hi @Anup_Dhakal,

There is a bit complicated but interesting structure

BIG WRAP SECTION (position:relative)

__ Div “section body” (position: auto)
–__ div with header “A million and one uses” (position: absolute)

__ Section for user info (position: relative, height: 100vh)
–__Div “section body” (position: relative)
- - - _div with text content (float: right)
**
–__Div “image container” (position: absolute, h, aligh top: 0px, z-index: 6)_**
_- - - _div with background image (position: absolute, height: 100vh, aligh top: 0px)
_- - - _div for user photo (position: relative, height: 100%)
- - - _ _ _ user photo (position: absolute)

__ Section for user info (position: relative, height: 100vh)
–__Div “section body” (position: relative)
- - - _div with text content (float: right)
**
–__Div “image container” (position: absolute, h, aligh top: 0px, z-index: 5)_**
_- - - _div with background image (position: absolute, height: 100vh, aligh top: 0px)
_- - - _div for user photo (position: relative, height: 100%)
- - - _ _ _ user photo (position: absolute)

Try to re-create this structure and play around with it. I am not sure if there is also some jquery plugin or not.
Hope it helps.

Cheers,
Anna

1 Like

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