Div scrolls past the top and abruptly jumps into the page to become sticky

[nobitagit]

I had an issue with the sticky element becoming fixed too late while scrolling and abruptly jumping onto the page.
I have solved my problem myself but I will leave this documented here as it might save some hours to someone else.

My starting situation was the following. Two sibling components where the 1st one was visible on page load and the second one after clicking a button. The second component contains a div with the sticky directive.

    <component-one ng-if="ctrl.stage === '1'"></component-one>

    <!-- this component has a sticky div inside -->
    <component-two ng-if="ctrl.stage === '2'"></component-two> 

This caused the unwanted behavior as explained above.

What proved to be a solution was to invert the position inside the html to make ngSticky recalculate the styles without considering the other div.

    <!-- this component has a sticky div inside -->
    <component-two ng-if="ctrl.stage === '2'"></component-two>

    <component-one ng-if="ctrl.stage === '1'"></component-one>