Ionic 4 angular 6 scrollable global header

I’ve been attempting this for an entire day and can’t figure out what to do. I need to have a header that displays on every page, but scrolls with the content.

I included the header in app.html but the content scrolls and the header is always on screen.

I put the component in every page, but it isn’t using the same instance of the component which gives lag as there is content that has to be loaded on the header based on your login status. Ex: I go to page one and click page two. I click the sign in button, and it now displays “logged in”. Then I click page 2 and it says sign in for 1/10 of a second and then updates which looks bad.