â–Ľ
Streaming live at 10am (PST)

Keep one part sticky and one part scrollable for my grid

Hi there, i am trying to have one column sticky and one column scrollable in my Grid Section named (About us). I would really appreciate some help.
Thanks


Here is my site Read-Only: https://preview.webflow.com/preview/website-4f70c2?utm_medium=preview_link&utm_source=designer&utm_content=website-4f70c2&preview=11047749b6432fd84d95d12fcd58685c&pageId=5e72a2e4c8e22854c90edf1b&mode=preview
(how to share your site Read-Only link)

Hi Chetan
I am adding an image showing a basic 2 column grid set-up with the left side sticky.

As you can see it’s a simple grid with 2 columns and one row. The first column has a div named “Sticky-Parent” with position set to relative, inside that there is another div “Sticky-container” this is where you will select position sticky, and remember to change the top value. Anything you put inside the container div should stick to the viewport.

Hope this helps.

1 Like

HI there, i tried this but doesn’t seem to work. Can you please check my read only link and help me find my mistake.
The div i want sticky is How we work.
Thanks
Read only link : https://preview.webflow.com/preview/website-4f70c2?utm_medium=preview_link&utm_source=designer&utm_content=website-4f70c2&preview=11047749b6432fd84d95d12fcd58685c&pageId=5e72a2e4c8e22854c90edf1b&mode=preview

I know it’s a year later but just replying for anybody else in a similar situation. I figured out that instead of using a grid element use a container and set it’s display to grid instead and place your content as desired.

Click on your Grid container and make sure it’s set to align to top. The default is stretch. Should work fine after this.

Andy

Thank you so much, such an easy solution. It worked perfectly.

Webflow is doing such a grate job, I wish, they would have these information on the videos at university as well, It could have been flowless. I would definitely love to see the videos there that cover a few more scenarios than the straight forward one that shown in the video.