Work around for sticky inside child component

Ionic Framework ionic-v3
1

I’m trying to have some grand total in a sticky sitting atop the page. The problem is that the child component sits outside the scope of the scrolling container.

Here’s a partial of the parent -

<ion-content>
    <ion-grid text-center>
        <sticky-totals [total]="totals" sticky></sticky-totals>

Here’s the child or sticky component -

<ion-item-divider sticky>
    <h2>Estimated Total Cost <span class="float-right">{{ total | currency:'USD':true }}</span></h2>
    <ion-icon item-right name="refresh" (click)="refreshPage()"></ion-icon>
</ion-item-divider>

I want to reuse this component across multiple pages - any idea on how to make ui elements branched out in child components behave under a single dom?