Keep header fixed on scroll in Angular/Ionic application

At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:

When really, I would like the the header items of What are you looking for? and Current location to be fixed:

How can I do this? This is my code so far:

I’ve also created a CodePen here: