Keep header fixed on scroll in Angular/Ionic application
<p>At the moment, when a user with limited real estate decides to scroll down in my application, they are greeted with the following:</p>

<p><a href="https://i.stack.imgur.com/Br0Wq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Br0Wq.png" alt="enter image description here"></a></p>

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

<p><a href="https://i.stack.imgur.com/3pIpC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3pIpC.png" alt="enter image description here"></a></p>

<p>This is my code so far:</p>

<pre><code>&lt;ion-view view-title="Nearby"&gt;
  &lt;ion-content&gt;
    &lt;!-- Search --&gt;
    &lt;div class="list"&gt;
      &lt;div class="item item-input-inset" style="border: 0px; padding-bottom: 0px; background-color: #2784c9;"&gt;
        &lt;label class="item-input-wrapper"&gt;
          &lt;input type="search" placeholder="What are you looking for?" style="width: 100%" ng-model="services" ng-click="showLocations=false; showServices=false"&gt;
        &lt;/label&gt;    
      &lt;div class="item item-input-inset" style="border-top: 0px; background-color: #2784c9; margin-left: -2px;"&gt;
        &lt;label class="item-input-wrapper"&gt;
          &lt;input type="search" placeholder="Current location" style="width: 100%" ng-model="location" ng-click="showLocations=true; showServices=true"&gt;
        &lt;/label&gt;
        &lt;button class="button button-positive button-small" ng-click="location=''; services=''"&gt;
          &lt;i class="ion-close"&gt;&lt;/i&gt;
        &lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;

      &lt;!-- List of services --&gt;
    &lt;div class="list" style="margin-top:-24px"&gt;
      &lt;ion-list&gt;
        &lt;ion-item ng-repeat="service in serviceList | filter:services" href="#/app/services/{{service.id}}" class="item-icon-right" ng-hide="showServices"&gt;
          {{service.title}}
          &lt;i class="icon ion-chevron-right icon-accessory"&gt;
                        &lt;span class="badge badge-positive"&gt;{{service.total}}&lt;/span&gt;
                    &lt;/i&gt;
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
    &lt;/div&gt;

    &lt;!-- List of regions --&gt;
    &lt;div class="list" style="margin-top:-24px"&gt;
      &lt;ion-list&gt;
        &lt;ion-item ng-repeat="location in locationList | filter:location track by $index" href="#/app/locations/{{location.id}}" ng-click="setLocation(location)" class="item-icon-right" ng-show="showLocations"&gt;
          {{location.title}}
          &lt;i class="icon ion-chevron-right icon-accessory"&gt;
                        &lt;span class="badge badge-positive"&gt;{{location.count}}&lt;/span&gt;
                    &lt;/i&gt;
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
    &lt;/div&gt;

  &lt;/ion-content&gt;
&lt;/ion-view&gt;
</code></pre>

<p>I've also created a CodePen here: <a href="http://codepen.io/anon/pen/VeQzBv" rel="nofollow noreferrer">http://codepen.io/anon/pen/VeQzBv</a>.</p>