Sticky doesn't stop being sticky where I need it


Hello Webflow masters! Newbie here.

Could someone please help me solve these 3 issues:

  1. I have one section-navbar and several sub-navbars. When the following sub-navbar comes I want it to push the previous one up, out of view instead of coming on top of it.
  2. I have an interaction set to my second category section which activates animation in the section main navbar but I want it to start when the first sub-navbar from the second category starts to stick (touches the main nav-bar), which I managed to do it with the offset function but the problem is when you scroll in from below to above - the first category is on focus until it reaches 90% of the screen which is not okay because the category navigates which procedure images the user is looking at. The wrong category in the section navbar comes in focus when it scrolls almost to the bottom of the section.
  3. I want them both (the section navbar) and the sub-navbar to stop sticking at certain point but it stops sticking several px before the end of the section reaches the top.

I hope I am not asking for too much. Thank you in advance!!!

Best regards,

Yanis.

Here is my site Read-Only: Link here