Second Header Won't Stick

So I made a table that is lower on my page. I have one sticky header in the fixed position at the top of the page. When I scroll and reach the table I want the table header to stick to the bottom of the first header and the rest to continue scrolling underneath. If i scroll in reverse, when the table is done i want the header to re-attach itself to the top of the table and continue to move down the page.

Can this be done with Interactions?


Here is my public share link: LINK
(how to access public share link)

Yes but with a trick. You have to have 2 identical element, one you tick where you want and hide, and the other that’s positionned normally. Then you add an interaction to the latter, with a onScroll interaction that says “show the former when the latter reaches the same position”. then it instantly displays on top of it and it’s not noticeable. Setup the reverse effect in the interaction and you’re good.

1 Like

OH hell yeah! That’s what I needed! Gracias!

1 Like

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