How to Create A Sticky Header Row for Charts?

Hey all. Can anyone please help me create a sticky header row for a chart that is part of this new website that I’m building? In other words, I’d like the top row (with all the column headers) to stay on the screen while the visitor scrolls down the page. All the content in the rows beneath should simply disappear behind the top header row as the user scrolls down the page.

I’d love for it to look and feel exactly like the chart on this other website (scroll down until you see their chart):

Any help would be greatly appreciated. I’ll leave the link to my website below. Thanks!


Here is my site Read-Only:
https://preview.webflow.com/preview/gt-entrepreneurs?utm_medium=preview_link&utm_source=designer&utm_content=gt-entrepreneurs&preview=fcf57915017a033c21ec58f5ad331691&pageId=621e4edb07676d612a82ada6&workflow=preview

I just made “Grid 3” Sticky and added a background colour and should be working, you can play with spacing/padding ect.

Hey thank is awesome. Thank you, @Kyle_Davies1 . Unfortunately, the link I provided was read-only, though, so your changes weren’t saved on my end. Are you able to explain in words how you achieved this result, please? Any help would be greatly appreciated. Thank you!

Yes for sure:

Select the “Container Default” I would add another class called “Chart” Select relative positioning(under the drop-down that says static currently) sticky positioning needs a relative position parent to work.

Select Grid 3 select sticky under the positioning dropdown, add about 5px to the top under the positioning dropdown and background colour so it doesn’t overlap with the other text.
Screen Shot 2022-03-13 at 3.19.49 PM

From here you should have the effect you want then play around with some more padding drop shadows etc to grid 3 for a polished look.