Does anyone know how to do side by...

User 2885601 Photo


Registered User
42 posts

2 columns, where the one on the left side is sticky and the right side scrolls. As seen here:
https://design.google/library/managing-ambiguity/

Any idea how to do this?
User 2699991 Photo


Registered User
4,782 posts
Online Now

jimcapraro wrote:
2 columns, where the one on the left side is sticky and the right side scrolls. As seen here:
https://design.google/library/managing-ambiguity/

Any idea how to do this?


set the column you want to stay put

position = fixed

margins to whatever you feel the column requires to look ok
If you want images to change as the user scrolls, you need some fancy JS third party stuff and custom css added, that effect cannot be achieved from within site designer without those type of additions.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

I have had an idea maybe it can be done with swapping images on user scroll without those other thingies, I will have a try now & see will update on progress.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2699991 Photo


Registered User
4,782 posts
Online Now

Nope cannot do it direct within Site Designer I got something similar but not really good effects,,

This would have to be done using third party add-ins (CSS/JS and some fancy code)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2088758 Photo


Senior Advisor
3,086 posts

Very cool effect! I have not had much time to play but if you do figure this out please let us know.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 2885740 Photo


Registered User
60 posts

Hi Jim,

here's my attempt with Materialize. It did not need any extra js or css.
Attachments:
User 2695940 Photo


Registered User
148 posts

Well done René, works very neatly.

John Ferguson
Website Design and Development
www.jf1.co
User 2699991 Photo


Registered User
4,782 posts
Online Now

John Ferguson wrote:
Well done René, works very neatly.


except for on mobile devices (phones/tablet etc) because as we know they cannot do "sticky"
although some of the larger tablets etc i do believe can do it, but mine (Samsung) still doesn't
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/
User 2885601 Photo


Registered User
42 posts

Thanks so very much René! It's simply perfect.

Thanks to everyone else also for weighing in.
User 2699991 Photo


Registered User
4,782 posts
Online Now

Hi everybody
when i said that it needed third party JS & Css stuff, that was to make it perform like the example page given by Jim

Obviously it can be done without as Rene has done
I have done one in foundation which I tried to emulate as much as possible also without using any third party CSS & JS

my example
https://mawarputih.id
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://alphathemes.coffeecup.com/forms … an%281%29/

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.