How to properly configure ScrollTrigger?

Question

Angular

Hello!
I have a project in Angular, where the header is fixed, between the header and the content there is a section that separates them, and there is the content itself, in which 1 of the blocks needs to be made sticky to the header. The header is a separate component, the section that separates the content and the header is also a separate component and the block that should stick is also.
For example, I did something like this in codepen:


I'm trying to do this with GSAP and ScrollTrigger, but I can't figure out how to do anything with the .test block when the header matches it. And it should be fixed to the header and go with it to the footer, and when scrolling back, when it reaches its place, stay there