Sticky sections on scroll #1519
-
|
Hi team, We do have a requirement for a sticky section when it reaches to the top of the viewport. Are there any guidelines or recommendations to achieve this today ? Any plans to include in the paste library ?
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
Hi @jaymehta1986, You can use the CSS sticky position ('position: sticky') to accomplish this. You'll need a few things:
I have a simple codebox example set up for you to check out here: In my example, the sidebar is the sticky element. You will have to make the viewport small enough to trigger scrolling to see the effect. Let me know if you need additional info! |
Beta Was this translation helpful? Give feedback.
-
|
@zahnster thanks much for the info. I think this should work for our use case. 🙏🏽 |
Beta Was this translation helpful? Give feedback.
Hi @jaymehta1986,
You can use the CSS sticky position ('position: sticky') to accomplish this.
You'll need a few things:
position="sticky"on the element you want to stick to the viewport when scrolledtop="someSpacingVar"on the same element (this sets how top from the viewport it should display, and you'll need to declare an actual spacing token there)I have a simple codebox example set up for you to check out here:
https://codesandbox.io/s/hopeful-bird-v9dqm?file=/src/index.tsx
In my example, the sidebar is the sticky element. You will have to make the viewport small enough to trigger scrolling to see the effect.
Let me know if you need additional info!