Elementor Sticky Header Capturing Category Titles Dynamically on Scroll

[kristiin.ms]

Hi all,


I'm working on a WordPress + Elementor Pro site and would really appreciate help with a specific scroll-based interaction.
I have a transparent sticky header. When the user scrolls past the hero section (which has category icons with captions underneath),the header background turns white. At this point, I want the header to dynamically collect and display the captions (e.g., category names like "TÖÖLAUAD", "TÖÖTOOLID", etc.) from the icons below ( basically making it feel like the captions float up into the header).
The header is built with Elementor and right now I added HTML widget to the middle where captions should appear but I can not figure this out.

 

[kristiin.ms]

Found a solution if anyone else is having the same problem as a beginner in Elementor.
Made the usual header bar with custom css that enables the white background after trigger element. You will not need html widget or any js.
Instead of using Image Captions, I added Heading elements under icons.
Made Headings (text elements) sticky and set their Z-index higher than the header bar Z-index.
Now they stick/jump on white header bar as it scrolls past them.