Two sticky headers

Two sticky sections on the same page-

Hi!
I have created a website, in which the header is sticky. I created the header template and implemented it with a shortcode. I made the section with the shortcode sticky.
The thing is, when the user scrolls down there’s another section, in the middle of the page, that’s supposed to join the other sticky section and stick below it.
I hope my explanation is clear enough.

Is there any way to achieve that with Elementor’s scrolling effect function? At the moment, the second section gets sticky to the very top of the page, ignoring the first sticky section.

Thanks!

The page I need help with: [log in to see the link]